Rollover Image CSS

Resolved hazelbug
(@hazelbug)

15 years, 5 months 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!!!

Viewing 9 replies - 1 through 9 (of 9 total)

Saurus
(@saurus)

15 years, 5 months 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.

mrkingid
(@mrkingid)

15 years, 5 months ago

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

Be right back with the code…

mrkingid
(@mrkingid)

15 years, 5 months 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;

}
———————————
Thread Starter hazelbug
(@hazelbug)

15 years, 5 months 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?!
mrkingid
(@mrkingid)

15 years, 5 months 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.

Thread Starter hazelbug
(@hazelbug)

15 years, 5 months 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!

mrkingid
(@mrkingid)

15 years, 5 months ago

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

LEVI44
(@levi44)

14 years, 5 months ago

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

hoov
(@hoov)

14 years, 5 months ago

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