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

htmljavascriptonclick

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.

Best Answer

You can do this in css!

just add this to the element you want the style.

cursor:pointer;