Log in

View Full Version : Changing mouse cursor in image map


suwii
12-04-2006, 10:22 PM
Hi!
I was wondering how to change the 'hand' cursor on an image map hotspot to a 'crosshair' using the area tags.
I have the following code...and part of my css already points out to use the crosshair cursor but it doesn't work on the image map.


<img src="newhead.jpg" usemap="#mymap" border="3" alt="" width="700" height="340" /><br />
<map name="mymap">
<area shape="rect" coords="0,290,90,340" href="home.html" alt="Home">
<area shape="rect" coords="90,290,140,340" href="bio.html" target="iframe" alt="Biography">
<area shape="rect" coords="140,290,220,340" href="news.html" target="iframe" alt="Latest News">
<area shape="rect" coords="220,290,320,340" href="gallery.html" target="iframe" alt="Gallery">
<area shape="rect" coords="320,290,420,340" href="media.html" target="iframe" alt="Media">
<area shape="rect" coords="420,290,520,340" href="http://z8.invisionfree.com/Adam_Scott" target="new" alt="Adam Scott Fan Forum">
<area shape="rect" coords="520,290,600,340" href="links.html" target="iframe" alt="Links">
<area shape="rect" coords="600,290,710,340" href="about.html" target="iframe" alt="About us">
</map>

any suggestions? thanks!
djr33
12-04-2006, 11:46 PM
The hand means "click this link" and has a special purpose. Changing it will confuse users.
If an area (as defined by an area tag) has a link value to it, then it will change the cursor to a hand, helping the user know which areas s/he can click and which s/he cannot. The areas that do not have a link set will not turn it to a hand, which is a good thing.
As for overriding that, not quite sure. I'd say just apply the code to change the cursor to the area, same as you would to an image, div, span, etc.
suwii
12-05-2006, 12:20 AM
Yeah thanks for that!
So how do you change the hand cursor within the area tag? Any specific instructions? thank you..
djr33
12-05-2006, 02:23 AM
style="cursor:hand"... i think.
there's a code on DD for it.

Anyway, use the SAME method you're using for other stuff, but just in the <area ...> tag instead.
suwii
12-05-2006, 02:30 AM
I tried it..and it didn't work :(
anyone else got any suggestions? :P
thanks djr33!
djr33
12-05-2006, 06:01 AM
Hmm... not sure.
I just typed that from memory.
I believe there are several scripts on this subject on in the DD library... take a look.
suwii
12-05-2006, 08:52 AM
YES!! just when i was about to give up hope..this comes along!!

http://www.dynamicdrive.com/dynamicindex11/fcursor.htm

yay! THANKS djr33! I had to use span tags!
codeexploiter
12-05-2006, 08:52 AM
Below you can find something that achieves what you want. I've done it with the help of JavaScript.



<!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>Image Map Cursor Change</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function over(id, cursorVal)
{
document.getElementById(id).style.cursor = cursorVal;
}

function out(id)
{
document.getElementById(id).style.cursor = 'default';
}

</script>
</head>
<body>
<div id='mapa'>
<map name="mymap">

<area href='http://www.google.com' onmouseover="over('mapa', 'crosshair');" onmouseout="out('mapa');" shape="rect" coords="284,161,391,181" >

<area href='http://www.yahoo.com' shape="rect" coords="575,109,654,137" onmouseover="over('mapa', 'crosshair');" onmouseout="out('mapa');" >

</map>
<img border=0 src="Web/Javascript Object Model.jpg" usemap="#mymap">
</div>
</body>
</html>


The coordinates are based on the image on which i've worked. You can change them according to your needs .

Important things noted in blue and red color
codeexploiter
12-05-2006, 09:03 AM
http://www.dynamicdrive.com/dynamicindex11/fcursor.htm

I don't think simply using
<span style="cursor:pointer;cursor:hand"> will help you because i've tried it first but got nothing.