WordPress.org

1. hazelbug
   Member
   Posted 3 years ago #

   Hi, I've been trying to do this many different ways for the past 2 days... I am stuck.

   My rollover images aren't showing up in the body of my page. You can see here http://www.jkltd.com/newsite/oriental-rugs/

   This is the code I put into my style sheet
   

   #test
   {
     display: block;
     width: 45px;
     height: 31px;
     background: url('2x3A.gif') no-repeat 0 0;
   
   }
   
   #test:hover
     {
       background: url('2x3B.gif') no-repeat 0 0;
     }
   
   #test span
   {
     display: none;
   }

   This is the code I put into the HTML on my page.
   <a id="test" title="test" href="#"><span>test </span></a>

   But the images aren't showing up. Anyone have an idea of what I am doing wrong?

   THanks!!!

2. Saurus
   Member
   Posted 3 years ago #

   "hover" is a link element and has to be included in the CSS for your links. Example:
   [code]
   a:link { color: #FF9900}
   a:visited { color: #CCCCCC}
   a:hover { font-weight : normal; background-color : #FF9900; color: #FFFFFF }
   a:active { color: #FF9900}
   [/code]

   Unless you're trying to do something I've never heard of, you need to follow a similar context.

3. mrkingid
   Member
   Posted 3 years ago #

   You need to do a shift not rollover. Rollover only works with Java.

   Be right back with the code...

4. mrkingid
   Member
   Posted 3 years ago #

   you need to splice the two graphics together and width and height is the size of your spliced graphic. What this code does is just shift the image over so it acts like a rollover. In my example the graphic is 190px wide in reality by the code will only show half (95px) at a time.

   For a better description see this link....

   http://magnetiq.com/2006/08/27/using-less-images/

   code...
   -----------------
   .testrollover a{
   display: block;
   width: 95px;
   height: 20px;
   background: url(images/yourgraphic.jpg) no-repeat;
   text-decoration: none;
   float: left;

   }

   .testrollover a:hover {
   background-position: -95px 0;

   }
   ---------------------------------

5. hazelbug
   Member
   Posted 3 years ago #

   Thanks for your response.

   I put this in my CSS style sheet
   

   .testrollover a
   {
   display: block;
   width: 45px;
   height: 31px;
   background: url('images/2by3Rugs.gif') no-repeat;
   text-decoration: none;
   float: left;
   
   }
   
   .testrollover a:hover
   {
   background-position: -95px 0;
   
   }

   And this in the HTML window on my page.
   <a id="testrollover" href="#"> </a>

   It's right above the words "Original Image". Same result.
   I don't know what I am doing wrong?!

6. mrkingid
   Member
   Posted 3 years ago #

   In testrollever a:hover you need the background position coords to be

   background-position: -45px 0;

   I take it the image is 90 px's wide

   Also make sure your pointing the correct URL for the image location

   and your HTML text should be

   <div class="testrollover"><a href="#"> </a></div>

   If you still have an issue with it not working. post a link to the URL page and I can have a look at it.

7. hazelbug
   Member
   Posted 3 years ago #

   I am in love with you! Thank you so much!!! It worked. sigh.
   I kept putting in "a" instead of "div"

   It's always the little things.
   Thanks for taking the time.
   It's much appreciated!

8. mrkingid
   Member
   Posted 3 years ago #

   You are more than welcome. I am glad it worked out for you. :)

9. LEVI44
   Member
   Posted 2 years ago #

   This is great! The only thing is i can't work out how i can change the URL it goes to....any ideas?

10. hoov
    Member
    Posted 2 years ago #

    LEVI, just change the # sign to whatever URL you want the link to take you to.

Topic Closed

This topic has been closed to new replies.