0

I would like to use an image that is 195 x 29 to replace the hand when someone hovers over a map image. I'm trying to do this css but would consider a javascript option if no css option is available. I've tried several different css options but can not get the results I'm looking for. Currently i have my css code setup as:

#docmap {float:left;width:620px;height:225px;} .click a:hover {cursor:url(images/click.png) no-repeat !important;} 

and my html is:

<div id="docmap" class="click"><a href="http://goo.gl/maps/R3TXp" target="_blank"><img src="http://whistlerworks.com/clients/918smile/site/wp-content/themes/Karma/images/map.png" alt="" /></a></div> 

Thanks for the help.

3 Answers 3

2
.click a {cursor: url(images/click.png), pointer} 

https://developer.mozilla.org/en-US/docs/CSS/cursor/url

Sign up to request clarification or add additional context in comments.

Comments

1

check this out, might help let me know if its useful

http://www.htmlgoodies.com/beyond/css/create-custom-cursors-with-javascript-and-css3.html#fbid=2P5qQIHDj3T

Comments

0

The safest image format is a 32x32 8-bit black and white .ico file.

As @isherwood mentioned, the basic syntax is:

.click a { cursor: url(my-icon.ico), auto; } 

I don't think JavaScript would help. Any browser support available would likely be via CSS alone. And you'd have to be willing to live with some browsers simply not supporting it (i.e., progressive enhancement).

Testing in different browsers

Here's a demo that uses a variety of image formats. Move the mouse over the squares to find out what works in each browser. In each case, if it works, you'll see a butterfly cursor.

Exceptions: The bottom row uses a completely-transparent image, so you should see no cursor at all. On the first two rows, in the "Help" column, you should see the default help icon (which is the fallback cursor for all of the other squares).

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.