/    Sign up×
Community /Pin to ProfileBookmark

help with setting mouse pointer display on image map

Copy linkTweet thisAlerts:
Jun 27.2003

hi all.

I am new to this site although I’ve read plenty of the posts on here over the past year or so as the replies have often answered questions I myself was going to raise. but in this case I cannot find the solution to my problem.

Basically I’ve written a script to swap over two images and their associated image maps when a different image hotspot is clicked on (are you following me?). The problem is that whilst that works fine (in the browsers I’ve tested in so far anyway – please lmk if you find otherwise) the mouse pointer is an arrow when hovering over this link rather than a ‘hand’ which is what I need it to be like all the other links.

The site has been temporarily uploaded to this location:
[url]http://www.51pegasus.co.uk/mums4/newversion/about.htm[/url]
(still work in progress so please be gentle!) so you can see what I am referring to.

The first 5 navigation points are in one image and the others are in a second (that gets swapped with a 3rd when the last link in the top navigation – food concerns – is clicked).

Would really appreciate any help on working this out!

Cheers all ?
Sadie

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@ExuroJun 27.2003 — Well, it took be a little while but I think I finally got it. Unfortunately, the <AREA> tags don't seem to like the style="" attribute, so I couldn't do the easy way and just say style="cursor:hand" like I tried origonally. Instead I used the onMouseOver and onMouseOut event handlers to change the pointer back and forth as the cursor moves over and off of the Food Concerns image. Here's the two sections of code I edited:

( line 48: )
... &lt;img [b]id=topMenu[/b] src="nav1.gif" width="190"
height="157" border="0" usemap="#Map"&gt; ...
( line 92: )
&lt;area shape="rect" coords="45,128,180,153" onClick="swapMenu();"
[b] onMouseOver="document.images['topMenu'].style.cursor='hand'"
onMouseOut="document.images['topMenu'].style.cursor='auto'"[/b]&gt;

I hope that fixed your problem!
Copy linkTweet thisAlerts:
@obscureauthorJun 27.2003 — You're a star!

I too tried and failed with the seemingly easy option of the style="cursor:hand", I should have thought to put it in the mouseOver event handlers.

Thanks so much for your help ?

Sadie
×

Success!

Help @obscure spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...