Image Map Mouse Over

[kathyc2020]

I have an image map with selected hot spots.

When the user moves their mouse over the selected area,
I would like a transparent image to hover just over
the mouse position and when mouse moves off the selected
area, image disappears.

I have found quite a lot of code for tooltips etc., but
nothing along the lines of what I need.

Does anyone have any suggestions?

 

[dwarfthrower]

Put your image into a <div> tag:

<div id=&quot;imageContainer&quot; 
     style=&quot;position:absolute; display:none;&quot;>
 <img src=&quot;transparent.gif&quot;>
</div>

Write your onmouseover handler to set the position of the div to near the mouse pointer and set the display property to block;

function handleMouseOver(){
 var invDiv = document.getElementById("imageContainer");
 var mouseX = parseInt(event.clientX);
 var mouseY = parseInt(event.clientY);

 // Set the position of the div about 10px up and back from
 // the mouse pointer
 var divPosX = mouseX - 10;
 var divPosY = mouseY - 10;

 invDiv.style.left = divPosX;
 invDiv.style.top = divPosY;
 invDiv.style.display = "block";
}

The mouseout handler only needs to hide the div

function handleMouseOut(){
 var invDiv = document.getElementById("imageContainer");
 invDiv.style.display = "none";
}

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

Check out Tek-Tips Australia New Zealand forum1155