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.

Code:

<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

Originally Posted by suwii

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

I don't think simply using

Code:

<span style="cursor:pointer;cursor:hand">

will help you because i've tried it first but got nothing.

Thread: Changing mouse cursor in image map

Thread Tools

Search Thread

Changing mouse cursor in image map

Bookmarks

Bookmarks

Posting Permissions