Results 1 to 5 of 5
  1. #1
    Join Date
    Dec 2010
    Posts
    142
    Plugin Contributions
    0

    Default Please help me implementing a custom cursor with CSS

    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:

    Code:
    .next:hover { cursor:url(img/right-pointer.png); }
    Any help is very much appreciated.

    Thank you,
    R

  2. #2
    Join Date
    Jun 2005
    Location
    Cumbria, UK
    Posts
    10,266
    Plugin Contributions
    3

    Default Re: Please help me implementing a custom cursor with CSS

    Something like THIS, perhaps?
    20 years a Zencart User

  3. #3
    Join Date
    Dec 2010
    Posts
    142
    Plugin Contributions
    0

    Default Re: Please help me implementing a custom cursor with CSS

    Quote Originally Posted by schoolboy View Post
    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.

  4. #4
    Join Date
    Jun 2005
    Location
    Cumbria, UK
    Posts
    10,266
    Plugin Contributions
    3

    Default Re: Please help me implementing a custom cursor with CSS

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

    That image system is provided as a commercial module by magictoolbox.
    20 years a Zencart User

  5. #5
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    13,892
    Plugin Contributions
    96

    Default Re: Please help me implementing a custom cursor with CSS

    Quote Originally Posted by lolwaut View Post
    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:

    Code:
    .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.

 

 

Similar Threads

  1. Some help implementing this tradetracker script please
    By Dramacydril in forum General Questions
    Replies: 0
    Last Post: 4 Jan 2013, 11:20 PM
  2. Please help - Erased my custom css stylesheet.
    By kelly14 in forum Templates, Stylesheets, Page Layout
    Replies: 16
    Last Post: 14 Sep 2012, 02:36 PM
  3. Help with CSS from custom template
    By cudaboy71 in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 29 Jun 2007, 01:03 PM
  4. please help with css
    By cherylkemp in forum Templates, Stylesheets, Page Layout
    Replies: 18
    Last Post: 21 Jul 2006, 04:43 PM

Posting Permissions

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