473,396 Members | 2,052 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

onmouseover javascript for image map areas

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

Dec 21 '06 #1
4 3209
Hmm.. So I take it no one has any suggestions on this??

Dec 22 '06 #2
ASM
GC*****@aol.com 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;
}
}

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 22 '06 #3
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

Jan 16 '07 #4
Lee
GC*****@aol.com 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 <maptag 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".
--

Jan 16 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Tim | last post by:
Hope someone in the big wide world can help... What I want to do is have an image slideshow which automatically scrolls through a series of images very fast, then pauses when you move your mouse...
1
by: Martin Nadoll | last post by:
Hello, is it possible to change the bg-Image of a <td>-tag onMouseOver? maybe with javaScript or with css? Thzankis for any help, Martin Nadoll
2
by: Elisa | last post by:
I have two images, each with defined CSS hover states. I would like a mouseover on one image to trigger the hover state of the other image. Is this possible using javascript? If so, how? Any...
12
by: Epetruk | last post by:
Hi all, I want a page where the contents of a table cell are replaced with an image when the mouse moves over the cell, and the text is restored when the mouse moves out. Here's the html for the...
2
by: sachaburnett | last post by:
Hi everyone! I'm new to Javascript and am finding so much useful information on this group, so thanks to you all! I have a question about preloading images for onmouseover/out effects and...
3
by: equazcion | last post by:
Hi, I have an image reference (IMG) in my page that changes depending on the value of a database field. Clicking the image triggers an Ajax call to change the database field (toggles the field...
9
by: octophobik | last post by:
Hello, I have a PHP page that populates the page with images and a little bit of text under each image based on who's session is accessing the page. It also has for each image an...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.