View Full Version : image map cursor

10-16-2002, 06:37 AM
I hope someone familiar with CSS can help me. It concerns the site below. I think the setup is self-explanatory. The problem is, the client wants a plectrum which strums across the strings for the menu. It works fine...BUT, unlike using the default cursor where it turns into a hand over links and everything is obvious, here it isn't. The plectrum is very inaccurate as a cursor.

Is there a way I can make the cursor always a plectrum EXCEPT when it's over a link on the map (when it should turn into a hand)?? Each secton of the table is an image with an href (see below). The menu that comes up is a map. I've messed around with different classes, but I'm not sure what I'm doing. I want the cursor to change ONLY over the map links.

There's a recent post here that mentions putting an over-ride tag in the map img tag...but there isn't one here because the JavaScript calls it.

(I should explain that the surrounding pictures are links (going nowhere) because I needed an onMouseover event on them to get the menu to disappear when the cursor moves away. An onMouseout event didn't work on the menu...).

Thanks in advance.


Mr J
10-16-2002, 03:39 PM
Cursors are standard by name, ie the default cursor is a NW arrow.
A user can change the default arrow for another image but it will still be called the "default" arrow and will only be effective on their PC.

This means that whatever cursor you state on your page, unless the visitor has that image set for the named cursor, your plectrum will not be seen.

I think


10-17-2002, 01:14 AM
Well, if you check the source code of the page you notice:

<style type="text/css">
body,img {cursor:url(images/pick.cur);}

On my homepage, I use the following code:

CURSOR: URL(http://www.geocities.com/jon_zie/images/cursor.cur);

Try using my code. I replaced mine with the code from the guitar page and I noticed that my cursor did not change when I hovered it over an image link. With my code (second one) the default cursor changes to a hand.

(http://www.geocities.com/jon_zie - Hover your mouse over the smiley if you would like to see that it changes)

Hope that helps!

Mr J
10-17-2002, 03:28 PM
As it does with all links

10-17-2002, 06:02 PM
Thanks for replying guys. In reply to both of you, there's no trouble seeing the plectrum cursor (don't you see it?). Not sure I agree with you, Mr J, re not being able to see my cursor unless it's set in the user's browser. The newer versions of IE recognize the cursor:url(cursor.cur) style. Not sure about Netscape. Bacterozoid, I used your script and MINE didn't work . But, as i say, seeing the cursor is not a problem. By the by, why are you using an absolute URL for your cursor image? Anyway...

The setup is: the cursor moves over the middle section and that cell changes to the menu. The menu is in fact a map. I want the cursor property to apply to the map 'menu.jpg' only. There are no link tags since it's a map, and there are no img tags either because it's called with onMouseover="document.imgname.src=menu.src".

This is the code for the MIDDLE section ('middle.jpg' - the part of the guitar where you strum), which changes (to menu.jpg) when the cursor moves over it:

<a href="#" onMouseover="document.imgname.src=MENU.src">
<img src="images/MIDDLE.jpg" name="imgname" height="253" width="400" alt="" usemap="#menu1" border="0">

As an example of the other sections (cells), here's the code for the cell to the RIGHT (right.jpg). The onMouseover event changes menu.jpg back to middle.jpg

<a href="#" onMouseover="document.imgname.src='images/MIDDLE.jpg'">
<img src="images/RIGHT.jpg" height="253" width="318" alt="" border="0">

The only mention of 'menu.jpg', apart from in the preload function (maybe I can put something there?) and the map co-ords, is the "onMouseover="document.imgname.src=menu.src" command. Where can I put cursor commands?

Any more advice...please??

Mr J
10-17-2002, 08:00 PM
Sorry but all I get is the Hand cursor

10-17-2002, 09:23 PM
Maybe it's just your computer, lol, I dunno anymore. As for using that URL, I use MSFP for making my websites up and it helps me if I can see what it looks like before I upload a version and screw things up, lol. I'm not your pro web builder or anything, I just know very well what I'm doing and many ways to do things. Perfection isn't something I strive to achieve in minimizing code and such.

10-18-2002, 02:55 PM
Me neither - I'm just happy if it works :D

10-18-2002, 03:32 PM
I see the plectrum no problem (oh wait, that is the problem :)) and tried changing the code slightly in the actual href links to change the style whenever the mouse goes over. That didn't work, sorry to say (except for with text link), but for anyone else tryng to help, I suggest saving the three images needed (the plectrum, the guitar zoomed out, and the guitar zoomed in) to your pc and trying from there - easiest way to play with it I think.

Good luck, I'll still keep my eyes open for solutions.


10-18-2002, 04:16 PM
Thanks, murphyz. The plectrum...yes, there's no accounting for taste.

Attached are the images for the guitar zoomed in (menu.jpg) and out (middle.jpg). Sorry, I can't attach 'pick.cur'.

Any help will be appreciated.


10-18-2002, 04:41 PM
I can get it to change when you hover over the image - i.e. zoom in on the strings, but can't yet get it when youhover over a link.

I shall keep trying though :)


10-18-2002, 05:11 PM
Thank you for your continuing efforts. I was wondering: Just as styles are not applied if you hyperlink to another page (i.e. separate HTML), maybe styles are not applied to another image called with onMouseover="document.imgname.src=MENU.src". Hovering over the links is, well, a kind of 'second-generation' event.

If so, I was wondering if JavaScript would do the trick. I don't know much about JavaScript (still), but I fumbled in the dark and tried some document.writeln . Boy, was it dark :D. But no one has said it's impossible, so hopefully I'm wrong...