Mouse over image popup script

jerempsy · #1 (**permalink**) 08-02-2007, 06:52 PM

Guys, I need one such script in which placing the mouse over the link pops-up an image. Please PM me if you have one. Thanks.

OMC · #2 (**permalink**) 08-23-2007, 11:36 PM

this one from code lifter looks ok. simple and it is c&p. i would use this one if you need a snippet with nothing to upload. it is very small in size and should load quickly.

OMC

Code:

==============================================================
Script:     Auto-Sizing Image Popup Window

Functions:  Use this script to launch a popup window that
            automatically loads an image and resizes itself
            to fit neatly around that image. The script also
            places a title you set in the titlebar of the 
            popup window. Any number of images can be launched
            from a single instance of the script.
            
Browsers:   NS6-7 & IE4 and later
            [Degrades functionally in NS4]

Author:     etLux
==============================================================



STEP 1.
Inserting the JavaScript <script> In Your Page

Insert the following script in the <head>...</head> part
of your page. Take special care not to break any of the lines;
they must be exactly as shown.

Set the variables as per the instructions in the script.



<script>

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.

// SETUPS:
// ===============================

// Set the horizontal and vertical position for the popup

PositionX = 100;
PositionY = 100;

// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)

defaultWidth  = 500;
defaultHeight = 500;

// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows

var AutoClose = true;

// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(300,300);');
writeln('width=300-(document.body.clientWidth-document.images[0].width);');
writeln('height=300-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');       
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();		
}}

</script>



==============================================================



STEP 2.
Calling the Image Popup from Links in Your Page

This is the form of the function:

popImage("url_of_image","title_of_image")

Use the relative or absolute path of the image where we show
url_of_image.  This is the url of the image you wish to show
in the auto-sizing popup window.

Use any text you wish where we show title_of_image. This is 
the title that will appear in the titlebar of the popup. (Note:
do not use single- or double-quotes within a title.)

Caution:  Be careful to place both values within quotes.
See the samples below.


Example 1:  Launching from a text link

<a href="javascript:popImage('http://SomeSite.com/SomeImage.gif','Some Title')">
Click Here
</a>


Example 2:  Launching from an image link

<a href="javascript:popImage('http://SomeSite.com/SomeImage.gif','Some Title')">
<img src="YourImage.gif" border="0">
</a>


Example 3:  Launching from a form button

<form>
<input type="button" value="Click Here" onClick="popImage('SomeImage.gif','Some Title')">
</form>



============================[end]=============================

OMC · #3 (**permalink**) 08-23-2007, 11:42 PM

here is another that is only 5kb. it has alot more features and can be loaded from dreamweaver as a snippet i will bet. it is from internetdotcom and is probably what you are looking for.

it seems like more of a tooltip like popup. the images seem to load fast.

are you looking for a complicated version or a simple one?

OMC

Code:

<!-- TWO STEPS TO INSTALL POP-UP LINK WITH DESCRIPTION:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Patrick Lewis (gtrwiz@aol.com) -->
<!-- Web Site:  http://www.patricklewis.net -->
<!-- Begin
//   ##############  SIMPLE  BROWSER SNIFFER
if (document.layers) {navigator.family = "nn4"}
if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {navigator.family = "gecko"}

//  #########  popup text 
descarray = new Array(
"This site has some of the greatest scripts around!",
"These popups can have varying width. It is dependant upon the text message.",
"You can have <b>two</b> lines <br>and HTML content.",
"You can also have images in here like this:<br><img src=greenbar.gif>",
"You can put in a really long <br>description if it is nessary to <br>explain something in detail, <br>like a warning about content <br>or privacy.",
"</center>Lastly, you can have links like these:<br><a href='http://javascript.internet.com/'>JavaScript Source</a><br><a href='http://javascript.internet.com/'>JavaScript Source</a><br><a href='http://javascript.internet.com/'>JavaScript Source</a><br>With a change in the onmouseout event handler."
);

overdiv="0";
//  #########  CREATES POP UP BOXES 
function popLayer(a){
if(!descarray[a]){descarray[a]="<font color=red>This popup (#"+a+") isn't setup correctly - needs description</font>";}
if (navigator.family == "gecko") {pad="0"; bord="1 bordercolor=black";}
else {pad="1"; bord="0";}
desc = 	  "<table cellspacing=0 cellpadding="+pad+" border="+bord+"  bgcolor=000000><tr><td>\n"
	+"<table cellspacing=0 cellpadding=3 border=0 width=100%><tr><td bgcolor=ffffdd><center><font size=-1>\n"
	+descarray[a]
	+"\n</td></tr></table>\n"
	+"</td></tr></table>";
if(navigator.family =="nn4") {
	document.object1.document.write(desc);
	document.object1.document.close();
	document.object1.left=x+15;
	document.object1.top=y-5;
	}
else if(navigator.family =="ie4"){
	object1.innerHTML=desc;
	object1.style.pixelLeft=x+15;
	object1.style.pixelTop=y-5;
	}
else if(navigator.family =="gecko"){
	document.getElementById("object1").innerHTML=desc;
	document.getElementById("object1").style.left=x+15;
	document.getElementById("object1").style.top=y-5;
	}
}
function hideLayer(){
if (overdiv == "0") {
	if(navigator.family =="nn4") {eval(document.object1.top="-500");}
	else if(navigator.family =="ie4"){object1.innerHTML="";}
	else if(navigator.family =="gecko") {document.getElementById("object1").style.top="-500";}
	}
}

//  ########  TRACKS MOUSE POSITION FOR POPUP PLACEMENT
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
//  End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<div id="object1" style="position:absolute; background-color:FFFFDD;color:black;border-color:black;border-width:20; visibility:show; left:25px; top:-100px; z-index:+1" onmouseover="overdiv=1;"  onmouseout="overdiv=0; setTimeout('hideLayer()',1000)">
pop up description layer
</div>

<!--  THE TEXT FOR THE POPUP DESCRIPTIONS ARE ON LINE 12  -->

<a href="http://javascript.internet.com" onMouseOver="popLayer(0)" onMouseOut="hideLayer()"><font size=-1 face=arial><b>
THE JavaScript Source
	</b></font></a><br>

<a href="#" onMouseOver="popLayer(1)" onMouseOut="hideLayer()"><font size=-1 face=arial><b>
Variable width
	</b></font></a><br>

<a href="#" onMouseOver="popLayer(2)" onMouseOut="hideLayer()"><font size=-1 face=arial><b>
Double line popup
	</b></font></a><br>

<a href="#" onMouseOver="popLayer(3)" onMouseOut="hideLayer()"><font size=-1 face=arial><b>
Image sample
	</b></font></a><br>

<a href="#" onMouseOver="popLayer(4)" onMouseOut="hideLayer()"><font size=-1 face=arial><b>
Really long description
	</b></font></a><br>

<a href="#" onMouseOver="popLayer(5)" onMouseOut="setTimeout('hideLayer()',2000)"><font size=-1 face=arial><b>
Persistant with links
	</b></font></a><br>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  5.08 KB -->