Pop Up 4

Pop Up 4

JavaScript PopUps by Mike McGrath

Description:	This pop up window was first brought to my attention by Ken ("Ain't it great!") Gray. I then went to the originator's web site to obtain the latest version of the code, and present it here for your use. This code will allow pop up windows to appear with any link on your page. It's a great way to display additional info on a topic or product!
How to use:	Insert the scripts provided: 1. Cut and paste the HEAD code (popup4head.txt) into one BYOWG 2. Cut & paste the BODY code (popupbody.txt) into another BYOWG Add the required URL coding 1. If you simply want a text field to have a pop up window associated with it, then insert and edit the following code in a BYOWG: <div id="d9" style="width:100%; text-align:right"> <br><a href="javascript://" onmouseover="popup('Title or line 1<br>Description or line 2','aquamarine')" onmouseout="kill()"> mouseover>HERE</a><br></div> Notes: * The div id "d9" must be unique if you use this code more than once on any given web page * The text-align attributes are: left, center, right * The popup parameter actually consists of two sub parameters, a description and a color: popup('description','color') * Within the popup parameter, you can have text or other HTML code, like the <br> that I inserted 2. If on the other hand, you wish to associate this with a clickable link, first right click on the image, select 'Create a URL or File', then insert the following code: http://www.whatever.com" onmouseover="popup('description','aquamarine')" onmouseout="kill()" target="_blank Publish and enjoy!
Example:	mouseover>HERE mouseover>HERE This has a linked page This has no linked page; for the URL enter: javascript: void(0) Hover your mouse over any of the three links and see what happens!
Download the code right click on link, then click on 'Save target (or frame) as'	popup4head.txt popup4body.txt popup4.txt
Other information:	The author of this code is: Mike McGrath Web site is: http://website.lineone.net/~mike_mcgrath/ A version of the script also appears in Dynamic Drive's web site: www.dynamicdrive.com

Source code:

<head>

<title>JavaScript PopUps by Mike McGrath</title>

<!--

#pup {position:absolute; visibility:hidden; z-index:200; width:130; }

//-->

</style>

</head>

<body>

<!--

######################################################

# JAVASCRIPT POPUPS ROUTINE VERSION #7 07-Feb-2001 #

# Written by Mike McGrath [mike_mcgrath@lineone.net] #

# PC-Tested for Netscape 3.04, 4.61, 6.0, & IE5.5 #

# Note: Popups may not cover all form field inputs. #

# PLEASE RETAIN THIS NOTICE WHEN COPYING MY SCRIPT. #

# THIS SCRIPT IS COPYRIGHT OF MIKE MCGRATH 1998-2001 #

######################################################

-->

<!--

var Xoffset=-60; // modify these values to ...

var Yoffset= 20; // change the popup position.

var popwidth=130; // popup width

var bcolor="darkgray"; // popup border color

var fcolor="black"; // popup font color

var fface="verdana"; // popup font face

// create content box

document.write("<DIV ID='pup'></DIV>");

// id browsers

var iex=(document.all);

var nav=(document.layers);

var old=(navigator.appName=="Netscape" && !document.layers && !document.getElementById);

var n_6=(window.sidebar);

// assign object

var skin;

if(nav) skin=document.pup;

if(iex) skin=pup.style;

if(n_6) skin=document.getElementById("pup").style;

// park modifier

var yyy=-1000;

// capture pointer

if(nav)document.captureEvents(Event.MOUSEMOVE);

if(n_6) document.addEventListener("mousemove",get_mouse,true);

if(nav||iex)document.onmousemove=get_mouse;

// set dynamic coords

function get_mouse(e)

{

var x,y;

if(nav || n_6) x=e.pageX;

if(iex) x=event.x+document.body.scrollLeft;

if(nav || n_6) y=e.pageY;

if(iex)

{

y=event.y;

if(navigator.appVersion.indexOf("MSIE 4")==-1)

y+=document.body.scrollTop;

}

if(iex || nav)

{

skin.top=y+yyy;

skin.left=x+Xoffset;

}

if(n_6)

{

skin.top=(y+yyy)+"px";

skin.left=x+Xoffset+"px";

}

nudge(x);

}

// avoid edge overflow

function nudge(x)

{

var extreme,overflow,temp;

// right

if(iex) extreme=(document.body.clientWidth-popwidth);

if(n_6 || nav) extreme=(window.innerWidth-popwidth);

if(parseInt(skin.left)>extreme)

{

overflow=parseInt(skin.left)-extreme;

temp=parseInt(skin.left);

temp-=overflow;

if(nav || iex) skin.left=temp;

if(n_6)skin.left=temp+"px";

}

// left

if(parseInt(skin.left)<1)

{

overflow=parseInt(skin.left)-1;

temp=parseInt(skin.left);

temp-=overflow;

if(nav || iex) skin.left=temp;

if(n_6)skin.left=temp+"px";

}

// write content & display

function popup(msg,bak)

{

var content="<TABLE WIDTH='"+popwidth+"' BORDER='1' BORDERCOLOR="+bcolor+" CELLPADDING=2 CELLSPACING=0 "+"BGCOLOR="+bak+"><TD ALIGN='center'><FONT COLOR="+fcolor+" FACE="+fface+" SIZE='2'>"+msg+"</FONT></TD></TABLE>";

if(old)

{

alert(msg);

return;

}

yyy=Yoffset;

skin.width=popwidth;

if(nav)

{

skin.document.open();

skin.document.write(content);

skin.document.close();

skin.visibility="visible";

}

if(iex)

{

pup.innerHTML=content;

skin.visibility="visible";

}

if(n_6)

{

document.getElementById("pup").innerHTML=content;

skin.visibility="visible";

}

// park content box

function kill()

{

if(!old)

{

yyy=-1000;

skin.visibility="hidden";

skin.width=0;

}

//-->

</script>

<br><a href="javascript://" onmouseover="popup('Popup<br>Top Left','beige')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<br><a href="javascript://" onmouseover="popup('Popup<br>Top Center','aquamarine')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<br><a href="javascript://" onmouseover="popup('Popup<br>Top Right','lavender')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<br><a href="javascript://" onmouseover="popup('Popup<br>Middle Left','aquamarine')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<br><a href="javascript://" onmouseover="popup('Popup<br>Middle Center','lavender')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<br><a href="javascript://" onmouseover="popup('Popup<br>Middle Right','beige')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<br><a href="javascript://" onmouseover="popup('Popup<br>Bottom Left','lavender')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<br><a href="javascript://" onmouseover="popup('Popup<br>Bottom Center','beige')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<br><a href="javascript://" onmouseover="popup('Popup<br>Bottom Right','aquamarine')" onmouseout="kill()"> mouseover>HERE</a><br></div>

</body>

</html>