Menu
I have the following code:
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<STYLE type=text/css><!–
.lilguydiv {left:100px; width:30px; position:absolute; top:100px; height:21px}
.menudiv {border:red 2px solid; z-index:10; left:60px; visibility: hidden;
font-size:10pt; width:160px; position:absolute; top:80px; height:106px; background-color:white}
//–></STYLE>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
</head>
<body>
<img src=”http://www.eecs.berkeley.edu/~loarie/test.colors.gif” border=”0″ usemap=”#Map” />
<map name=”Map” id=”Map”><DIV class=lilguydiv><area shape=”rect” coords=”17,24,98,580″ onmouseover=menu(1) href=”javascript:\” /></DIV>
<DIV class=menudiv id=”linkmenu”>
<CENTER><B>Select A Link</B></CENTER>
<UL>
<A href=”http://jdstiles.com/javamain.html”><LI>JavaScripts</A>
<A href=”http://jdstiles.com/jds.main_office.html”><LI>Office Tips</A>
<A href=”http://jdstiles.com/sets/”><LI>Design Templates</LI></A> </UL></DIV>
</map>
<DIV class=lilguydiv>
<A onmouseover=menu(1) href=”javascript:\”>
<IMG height=”38″ src=”http://www.jdstiles.com/images/js88.gif” width=”88″ border=0></A></DIV>
<DIV class=menudiv id=”linkmenu”>
<CENTER><B>Select A Link</B></CENTER>
<UL>
<A href=”http://jdstiles.com/javamain.html”><LI>JavaScripts</A>
<A href=”http://jdstiles.com/jds.main_office.html”><LI>Office Tips</A>
<A href=”http://jdstiles.com/sets/”><LI>Design Templates</LI></A> </UL></DIV>
<SCRIPT type=text/javascript><!–
var nav=(document.layers);
var n_6=(window.sidebar);
if(nav)document.captureEvents(Event.MOUSEMOVE);
if(n_6) document.addEventListener(“mousemove”,track,true);
document.onmousemove=track;
function track(e)
{
var x=(nav||n_6)?e.pageX:event.x;
var y=(nav||n_6)?e.pageY:event.y;
x=parseInt(x);
y=parseInt(y);
isvis(x,y);
}
function isvis(x,y)
{
if(nav)
{
if(document.linkmenu.visibility!=”hide”)
{
if(x<60||x>220||y<80||y>166)document.linkmenu.visibility=”hide”;
}
}
else if(n_6)
{
if(document.getElementById(“linkmenu”).style.visibility!=”hidden”)
{
if(x<60||x>220||y<80||y>186)document.getElementById(“linkmenu”).style.visibility=”hidden”;
}
}
else if(linkmenu.style.visibility!=”hidden”)
{
if(x<60||x>220||y<80||y>186)linkmenu.style.visibility=”hidden”;
}
}
function menu(n)
{
if(nav)
{
document.linkmenu.visibility=(n!=0)?”visible”:”hidden”;
}
else if(n_6)
{
document.getElementById(“linkmenu”).style.visibility=(n!=0)?”visible”:”hidden”;
}
else linkmenu.style.visibility=(n!=0)?”visible”:”hidden”;
}
function fakelocation(n)
{
alert(“This is target “+n+” ……nreplace this link with your target URL”);
}
// –></SCRIPT>
</body>
</html>
as you can see rolling over the image it brings a popup but i want the exact same thing to work on a hotspot (i.e. a point defined around the image) any ideas?
tried:
<map name=”Map” id=”Map”><DIV class=lilguydiv><area shape=”rect” coords=”17,24,98,580″ onmouseover=menu(1) href=”javascript:
but when i roll over nothing happens.