Search this site!

Return to the CSB Support home page
Pop Up 1   |   Pop Up 2   |   Pop Up 3   |   Pop Up 4   |   Pop Up 5   |   Pop Up 6   |   Pop Up 7   |   Pop Up 8
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:

              
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'
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>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!-- CUT'N'PASTE THIS CODE INTO THE BODY OF YOUR HTML DOCUMENT ===================-->
<style type="text/css">
<!--

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

//-->
</style>
<!-- END CUT'N'PASTE =============================================================-->

</head>

<body>

<!-- CUT'N'PASTE THIS CODE INTO THE BODY OF YOUR HTML DOCUMENT ===================-->
<!--
   ######################################################
   # 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 #
   ######################################################
-->
<script type="text/javascript">
<!-- Original: Mike McGrath  (mike_mcgrath@lineone.net) -->
<!-- Web Site: http://website.lineone.net/~mike_mcgrath -->
<!--

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>

<!-- END CUT'N'PASTE =============================================================-->


<div id="d1" style="width:100%; text-align:left">
<br><a href="javascript://" onmouseover="popup('Popup<br>Top Left','beige')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<div id="d2" style="width:100%; text-align:center">
<br><a href="javascript://" onmouseover="popup('Popup<br>Top Center','aquamarine')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<div id="d3" style="width:100%; text-align:right">
<br><a href="javascript://" onmouseover="popup('Popup<br>Top Right','lavender')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<div id="d4" style="width:100%; text-align:left">
<br><a href="javascript://" onmouseover="popup('Popup<br>Middle Left','aquamarine')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<div id="d5" style="width:100%; text-align:center">
<br><a href="javascript://" onmouseover="popup('Popup<br>Middle Center','lavender')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<div id="d6" style="width:100%; text-align:right">
<br><a href="javascript://" onmouseover="popup('Popup<br>Middle Right','beige')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<div id="d7" style="width:100%; text-align:left">
<br><a href="javascript://" onmouseover="popup('Popup<br>Bottom Left','lavender')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<div id="d8" style="width:100%; text-align:center">
<br><a href="javascript://" onmouseover="popup('Popup<br>Bottom Center','beige')" onmouseout="kill()"> mouseover>HERE</a><br></div>

<div id="d9" style="width:100%; text-align:right">
<br><a href="javascript://" onmouseover="popup('Popup<br>Bottom Right','aquamarine')" onmouseout="kill()"> mouseover>HERE</a><br></div>

</body>

</html>