Please help me implementing a custom cursor with CSS

[lolwaut]

Can anybody advise how to make a custom cursor appear upon mouseover of the product image ONLY on the product info page? I want to change the cursor to a magnifying glass when the user hovers over the product image on the product info page. Here is a link to a product on my site... I want a magnifying glass to appear when hovered over the main image: http://tinyurl.com/6psbe3a

I got this CSS code from another site that showed how to implement a custom cursor with CSS but I am not sure how to apply it to my own situation:

.next:hover { cursor:url(img/right-pointer.png); }

Any help is very much appreciated.

Thank you,
R

[schoolboy]

Something like THIS, perhaps?

[lolwaut]

Something like THIS, perhaps?

That's more functionality than I was looking for but I like it a lot! How is it done and is it compatible with Lightbox?

Thank you.

[schoolboy]

We don't use "lightbox" because it is old and clunky.

That image system is provided as a commercial module by magictoolbox.

[lat9]

Can anybody advise how to make a custom cursor appear upon mouseover of the product image ONLY on the product info page? I want to change the cursor to a magnifying glass when the user hovers over the product image on the product info page. Here is a link to a product on my site... I want a magnifying glass to appear when hovered over the main image: http://tinyurl.com/6psbe3a

I got this CSS code from another site that showed how to implement a custom cursor with CSS but I am not sure how to apply it to my own situation:

.next:hover { cursor:url(img/right-pointer.png); }

Any help is very much appreciated.

Thank you,
R

Create the file /includes/templates/YOUR_TEMPLATE/css/product.info.css and to that file add:

#productMainImage a:hover { cursor: url(../images/right-pointer.png; }

Then make sure that the file /includes/templates/YOUR_TEMPLATE/images/right-pointer.png exists.