SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast slp's Avatar
    Join Date
    May 2001
    Location
    Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mouseover hand in image map?

    Hi,
    I'm pretty sure this is a CSS question. I have an image map which does things (via javascript) when you click sections of the image. However, the areas aren't anchors, but I was wondering if I could get the little hand to come up on mouseover, so that the sections seem more like links to the user. I had a wild guess and tried putting style="cursor:hand" into the area tag, but that didn't work.
    Any help would be greatly appreciated.
    Thanks.

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could just make them into dummy anchors/links by containing the clickable sections inside link tags.

    <a href="#">...</a>

    Or you could put the javascript inside the anchor

    &#60;a href="javascript&#58;functionname()">...</a>

    Alternatively youcan put the javascript command directly into the 'url' rather than referring to a function...

    &#60;a href="javascript&#58;window.close()"...</a>

    ...sorta thing.


    That should make the cursor react like any other link and change to the pointing hand onMouseover.

    I think this is what you mean
    Last edited by Bill Posters; Feb 23, 2002 at 05:31.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Enthusiast slp's Avatar
    Join Date
    May 2001
    Location
    Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestions. Putting the href= part into the area tags does result in getting a hand as a cursor, but I was hoping to do it another way because I've noticed that when I use the href attribute, IE draws an outline around the image map section when it's clicked (and the outline stays there afterwards too), and in my case that looks quite messy. I don't know if there's any way to stop IE from doing that, but I guess that's more of a html question...

  4. #4
    SitePoint Enthusiast limmystar's Avatar
    Join Date
    Feb 2002
    Location
    Sydney, Australia
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    Hi,

    When you do <a href=""> try adding border="0" to get rid of the outline. So it's gonna look like this
    <a href="http://www.whatever.com" border="0"> and/or
    how about adding this command on top of your pages to get rid of any underlines:

    <style type="text/css">
    <!--
    a { text-decoration: none}
    -->

    I hope that this helps you
    Limmystar

  5. #5
    SitePoint Enthusiast slp's Avatar
    Join Date
    May 2001
    Location
    Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your suggestions, but it's not actually a border per se, just a very thin outline which only appears when the section is clicked. Also, it's an image map, so I'm using <area> tags rather than <a> tags. I tried adding "border=0" inside the area tag but the outline still appears. (I think I should probably post this problem in the html forum, since it's probably not a css thing I'm asking about now). But thanks for trying to help.

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's called the focus border and you can read a way to get rid of it in this thread.

    There are several ways mentioned (javascript) so it's worth reading the entire thread.

    Hope that sorts you out

    Last edited by Bill Posters; Feb 24, 2002 at 02:54.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    SitePoint Enthusiast slp's Avatar
    Join Date
    May 2001
    Location
    Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that was one heated thread!

    And considering the last post was only a few days ago I feel a bit stupid for not finding it myself (sorry!).

    Well, I found what I was looking for anyway. I added
    onFocus = this.blur()
    to my area tags and when it worked I couldn't have been more thrilled. (But before anyone begins to think I may be being overly artistic and insensitve, let me assure you that I also have a text-only version, so everybody's happy ).

    Thanks for pointing the thread out to me Bill. Some very interesting points of view were raised. I was glad to see it all resolved well.

  8. #8
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I have a similar problem...

    I have an imagemap of which I want to display onmouseover events and also onclick events - however when I do this I don't see the hand.

    If I add href to the area tags, I see the hand but the onmouseover self.status doesn't work anymore...

    What's worse is that it works on my Mac OS X & 5.2 but not on the PC, XP & IE 6

    Does anyone have any clues... Code used shown below

    <area shape="rect" coords="10,112,67,129"
    title="Hello" alt="Hello"
    onclick="window.location.href('/hello.html')"
    onmouseover="window.status='Hello';return true"
    onmouseout="window.status='';return true">

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try this:
    Code:
    area {
     cursor: pointer;
    }

  10. #10
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks...

    I have tried this and earlier I tried with cursor: hand - as the problem is without the href (when IE 6 on PC works) you can't see the mapped area is a link.

    I'm sure I'm not askiung for too much but for the life of me can't find any guides anywhere.

    Gerg


Bookmarks

Posting Permissions

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