How do I code image rollovers in XHTML?

i wrote a program once.

I got a headache.

CSS, that way there are no needed functions to run. ( change your name=”” attribute to title=”” and it will validate. )

HOWEVER, CSS is better anyways…

so, combine your normal state and hover state images into one image, ill use vertical arrangement for this example. you full image will be 400px x 342px.

the normal state, the CSS shows the normal section of the image, but hides the hover state with overflow:hidden;

rollover and the CSS says the image in this link change its margin to -171px, showing the hover state image and hiding the normal state

an easy CSS way:

XHTML
<a href=“http://www.nashish.com/index.html”>
<img src=“images/nawgrey.png” alt=“Site Logo” />
</a>

CSS

a {
overflow:hidden;
height:171px;
width:400px;
}

a:hover img {
margin:-171px 0 0 0;
}

this should work, but i didnt test this code, just off the top of my head.

but heres some articles as a bonus:
http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
http://www.tutorio.com/tutorial/pure-css-image-rollovers
http://www.alistapart.com/articles/rollovers/

@wenn You rock; I will try this out right now! :)

@wenn +5 for linking to A List Apart.

OK, guys, thanks to a couple of guides, I’ve figured out these CSS rollovers!

This mark-up is much lighter than what’s printed in the book I have. All I have to do now is apply it to all the rollovers I have so far.

Thanks again.

New problem now… The rollover is working, but when I view my page in Firefox, I get this weird double image and a grey bounding box on one side. The page is fine in Safari and Opera, but in Firefox and Camino I get the problem described..

I am sure that I followed the directions closely as well; I’m not sure what the problem could be.

Here is my code now:

HTML

<a href=”#” class=“rollover” title=“Logo”><img src=“images/nawroll.png” alt=“Site Logo”/></a>

CSS

a.rollover {
display: block;
width: 400px;
height: 171px;
background: url(“images/nawroll.png”);
overflow: hidden;
text-decoration: none;
}

a.rollover:hover {
background-position: -400px 0;
}

Can you post the URL for the page?

double (from what i see):
you have the link background set to the same image as the image within the link. take out the <img />, keep in mind with the background: ; method you may have to set up some image replacement styles for the links

bounding box:
try adding this at the top of your CSS file-> *, outline { border:0; outline:none; }

would be helpful to see it to give you more accurate feedback.

@wenn Wow, adding ”*, outline {border: 0, outline: none;” fixed the whole problem!

Thanks again, guys.

Lastly, my site isn’t “live” yet. I’m working on it offline at the moment.

I have one more problem to work out: I’d like for my rollover images to line up in a row, but when I attempted this with the <p> tag in HTML, the images still sat one atop the other. Here is my cody now:

HTML

<p>

<a href=”#” class=“rollover2” title=“You Are Not Alone”></a>

<a href=”#” class=“rollover3” title=“Art’s Alive”></a>

</p>

CSS

*, outline { border:0; outline:none; }

a.rollover2 {
display: block;
width: 80px;
height: 92px;
text-decoration: none;
overflow: hidden;
background: url(“images/features/notroll.png”);
}

a.rollover2:hover {
background-position: -80px 0;
}

a.rollover3 {
float: left;
width: 80px;
height: 92px;
text-decoration: none;
overflow: hidden;
background: url(“images/features/artroll.png”);
}

a.rollover3:hover {
background-position: -80px 0;
}

I am dreading the idea of having to reposition all my images again… I was hoping I could just arrange them with <p> tags like I did with my original rollover code. My guess is something in the CSS overrides the <p> tags, but I have no idea what. In short, I would like to arrange my rollovers horizontally instead of vertically like they’re appearing now.

put them in a list

<ul>
<li><a href=””></a></li>
<li><a href=””></a></li>
</ul>

CSS
ul { margin:0; padding:0; }
li { display:block; float:left; padding: 0 10px 0 0; }

that should put them in a horizontal arrangement with 10px spacing between them.

It works; thanks again!