Popup box containing text Options

[bzsim8]

Hello there. I'm hoping someone can help me. I am creating an interactive road construction map. I want a user to hover over the hotspot and have a pop up box display details about the project. I am not a programmer so I don't know how to write the code myself. I found the code below and it does what I want it to do, but it's not working right in IE7 or Safari. It works perfectly in Firefox on my PC!

Here is the code I found (Note the outdated browser testing) I tried the email and website and neither are valid.

<!--
######################################################
# 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=0; // modify these values to ...
var Yoffset= 20; // change the popup position.
var popwidth=400; // 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='left'><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>

And here is how I called it up through the hotspot:
<area shape="circle" coords="508,31,13" href="java script: void(0)" onmouseover="popup('<table cellpadding=5 cellspacing=0 border=1 bordercolor=#90C552 width=400><tr><td nowrap=nowrap bgcolor=#C7E2A8><strong>Project Name</strong></td><td bgcolor=#C7E2A8>Grimes Asphalt and Paving patchwork</td></tr><tr><td valign=top nowrap=nowrap><strong>Affected Streets</strong></td><td>NE 54th, NE 36th, SW Ordnance Rd, and SE Four Mile Drive</td></tr><tr><td nowrap=nowrap bgcolor=#C7E2A8><strong>Start Date</strong></td><td bgcolor=#C7E2A8>Summer 2009</td></tr><tr><td valign=top nowrap=nowrap><strong>Project News/Updates</strong></td><td>N/A</td></tr><tr><td valign=top nowrap=nowrap bgcolor=#C7E2A8><strong>Notes</strong></td><td bgcolor=#C7E2A8>Only short term street closures are expected during the patching and overlay work.</td></tr></table>','#ffffff')" onmouseout="kill()" onfocus="this.blur()" />

Now oddly enough, the code works perfect in my version of Firefox (3.0.6) and does exactly what I want: For any hotspots that appear close to the bottom of the broswer, the pop up box switches to display above the hotspot instead of below. And any close to the right edge of the browser, the pop up appears to the left of the hotspot so it is visible. However, I do not get any pop ups at all when testing with Safari. And IE7 acts OK at the top of the page, but when I scroll to the bottom of the page, the pop up displays too far away from my hotspot or off the page.

How can I tweak the code to work right? Or can you direct me to a website providing code that achieves the same effect?

Thank you so much for any help! I admire your intelligence for understanding this programming language b/c it's way over my head!

[Frederiek]

The sample you posted is effectively a bit old, still using the old NS4 layers. The url where you got it from doesn't even exist anymore.

You might look into Stu Nicholls' CSS Solar map, which you can find among other CSS Image maps at the bottom of the left column.
He also has a javascript version of the solar map (with onclick behavior).

[bzsim8]

Thank you! That is a wonderful example - the CSS solar map. I don't see on the web page how to access the code and customize it?

This post has been edited by bzsim8: Apr 2 2009, 12:22 PM

[Frederiek]

You need to look in the source of the page. Normally, Stu puts all necessary coding in there. Just copy the parts you need.