Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image map cursor

    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.

    http://www.v-gr.com/temp/Ventures

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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


  • #3
    Regular Coder bacterozoid's Avatar
    Join Date
    Jun 2002
    Location
    USA
    Posts
    490
    Thanks
    24
    Thanked 35 Times in 35 Posts
    Well, if you check the source code of the page you notice:

    PHP Code:
    <style type="text/css">
    body,img {cursor:url(images/pick.cur);}
    </
    style
    On my homepage, I use the following code:

    PHP Code:
    <style>
    <!--
    BODY{
    CURSORURL([url]http://www.geocities.com/jon_zie/images/cursor.cur[/url]);
    }
    -->
    </
    style
    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!

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    As it does with all links

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

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


    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

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


    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??

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Sorry but all I get is the Hand cursor

  • #7
    Regular Coder bacterozoid's Avatar
    Join Date
    Jun 2002
    Location
    USA
    Posts
    490
    Thanks
    24
    Thanked 35 Times in 35 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Me neither - I'm just happy if it works

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    London
    Posts
    220
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Mxx
    "Imagination is more important than knowledge" A. Einstein's 'Twin Paradox'

  • #10
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.



  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    London
    Posts
    220
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Mxx
    "Imagination is more important than knowledge" A. Einstein's 'Twin Paradox'

  • #12
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts
    murphyz,
    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 . But no one has said it's impossible, so hopefully I'm wrong...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •