Forum Moderators: open
I am having a slight problem with this piece of code. What I want is for when the mouse goes over the co-ordinates of the image map for another image to be displayed on top of the existing one with the existing still being shown. It works fine (or wrongly) in IE (to be expected) but I cannot get it to work in any of the other browsers…
Here is the javascript functions:
function over(image){
document.getElementById('overlay').style.visibility = "";
document.getElementById('overlay').src = image;
}
function out(){
document.getElementById('overlay').style.visibility = "hidden";
}
Here is the two images with the main one calling on the image map:
<center>
<div style="position:relative">
<img src="main-image.gif" border="0" usemap="#map">
<img id="overlay" src="overlay-image.gif" style="position:absolute;top:0px;left:0px;visibility:hidden" border="0">
</div>
</center>
Here is a sample of the image map with the calling events to the javascript:
<map name="map">
<area shape="rect" alt="Place" coords="0,0,45,14" href="/goto.html" title="Place" onMouseOver="over('new-overlay-image.gif')" onMouseOut="out()">
<area shape="rect" alt="Place 2" coords="10,10,45,14" href="/goto.html" title="Place 2" onMouseOver="over('new-overlay-image2.gif')" onMouseOut="out()">
</map>
Something tells me I should be using the z-index property and more CSS in each of the DIV's am I correct, where is it I am going wrong to get it fully functional in all browers?
TIA,
-George
Can anyone point me in the direction of a simple, clean and efficient cross browser onmouseover image script?
I have an image that particular x&y co-ordinates of it trigger an onmouseover event then I want to display another transparent image on top, leaving the main image visible.
Imagine and image with several items of fruit on it, an apple, orange and pear. When the user puts there mouse over any one of these fruits I wish to then show a transparent image of that particular piece of fruit with a bite out of it. I have managed to get it working in IE but not in Firefox, Netscape and Opera.
TIA,
-George
