onmouseover javascript for image map areas

G

GCeaser

I have the following page. It works fine in IE 6.0 but when I load it
in FireFox and place my mouse over the head of the image - nothing
happens. Any ideas? (Very short) -- The javascript is supposed to
move and show the div tag.

Thanks
George


----------- start html -------------
<!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>
<title>UTest Script</title>
</head>
<body>
<img id="bodyimage" alt="Image of Body" usemap="#bodymap"
src="images/Body.gif" width="239px" height="388px" />
<map id="bodymap">
<area id="head" shape="circle" onmouseover="showmessage(event,
this);" coords="85,73,70" alt="Head" />
<area shape="rect" coords="10,140,200,200"
onmouseover="showmessage(event, this);" alt="Asthma<br/>Bronchitis<br
/>RSV<br/>Pneumonia" />
<area shape="rect" coords="2,200,200,270"
alt="Stomachaches<br/>Vomiting and Diarrhea<br/>Bladder/Kidney
Infections"/>
<area shape="rect" coords="20,270,239, 388"
alt="Rashes<br/>Eczema<br/>Cuts, Scrapes, Stitches<br />Sprains,
Strains" />
</map>
<div id="stuff" style="visibility: hidden"> this is a test - this
is only a test</div>


<script type="text/javascript">
function showmessage(e, imagearea){
if (imagearea.id == "head")
{
stuff.style.left= (e.screenX + 120) + "px";
stuff.style.position= "absolute";
stuff.style.top = (e.screenY - 150 ) + "px";
stuff.style.visibility = "visible";
}
return true;
}
</script>
</body>
</html>

-------end html -------
--- Image to use ----

link to image:

http://www.pediatricsfirst.com/images/body.gif
 
A

ASM

(e-mail address removed) a écrit :
Hmm.. So I take it no one has any suggestions on this??

http://www.quirksmode.org/js/findpos.html
http://www.quirksmode.org/js/elementdimensions.html#top

what do mean screenX and screenY for a div ?
(div displayed in a window itself displayed in a screen)

in your function what is supposed to be 'stuff' ?

function showmessage(e, imagearea){
if (imagearea.id == "head")
{
stuf = document.getElementById?
document.getElementById('stuff').style :
document.layers?
document.layers['stuff'] :
document.Stuff.style;
stuff.position= "absolute";
stuff.left= e.clientX? (e.clientX+120)+'px' : (e.screenX+120)+'px';
stuff.top = e.clientY? (e.clientY-150)+"px" : (e.screenY-150)+'px';
stuff.visibility = document.layers? 'show' : 'visible';
return true;
}
}
 
G

GCeaser

Stuff is defined as the ID of a div tag on my page.

The point though is that in non IE browsers the event never fires (I
know this because if I put an alert in the first line of the
showmessage function, I will receive the alert in IE but not in say
FireFox. Any mapping to objects etc I can address cross browser. I
simply cannot seem to get the event to fire in non IE browsers.

Thanks
George
 
L

Lee

(e-mail address removed) said:
I have the following page. It works fine in IE 6.0 but when I load it
in FireFox and place my mouse over the head of the image - nothing
happens. Any ideas? (Very short) -- The javascript is supposed to
move and show the div tag.

Thanks
George


----------- start html -------------
<map id="bodymap">

The <map> tag is tied to the image via its "name" attribute.
Your map doesn't have a name attribute.
Some dangerously sloppy browsers accept "id" in place of "name".


--
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,992
Messages
2,570,220
Members
46,807
Latest member
ryef

Latest Threads

Top