Javascript / Onclick - Make the mouse cursor a hand when mousing over

Question

I'm working with a voting button.

The button was a simple link, but the search engine spiders were crawling the pages and triggering false votes. So, I changed it to an onclick to make that stop.

However, after doing that, the buttons still work fine, but the mouse cursor no longer has the 'hand' pointer. It remains the arrow pointer when you mouse-over, so it's hard to tell that it's an actual functioning link.

To attempt to fix this, I added a style="cursor:default;", I also tried style="cursor:crosshair;" to try and change the cursor behavior, but it's not working. The cursor remains the pointer the whole time.

Here's my code:

<map id="vote_buttons" name="vote_buttons">
     <area shape="rect" alt="" coords="5,3,78,43" onClick="window.location='http://www.site.com/page.php?vote=Y'" style="cursor:default;" title="" />
     <area shape="rect" alt="" coords="83,3,160,44" onClick="window.location='http://www.site.com/page.php?vote=N'" style="cursor:pointer;" title="" />
     <area shape="default" nohref="nohref" alt="" />
</map>

What am I missing here to make this mouse-over look like a hand?

Thanks in advance as always.

Answer 1

You can do this in css!

just add this to the element you want the style.

cursor:pointer; 

Answer 2

Actually I found the answer here: Cursor not changing to pointer in Usemap/area case

In your case, just add the href="javascript:void(0)" to each <area>.

Example: http://jsfiddle.net/yE5bQ/

Answer 3

In your CSS put this:

#vote_buttons {
    cursor:hand;
}

This will make it so that your cursor turns into a hand while hovering over the button.