« You Gotta See It!
Summer Cleaning »

CSS Rollover Fun

April 24th, 2008

The goal of this tutorial is to find a way to allow images to be shown with rollovers without the use of Java Script. View the final example here.

The basics of this trick are as follows.

First we need our HTML to work off of.

<a href="#" class="rollover">
Javayahtzee Icon
<img src="http://www.itsananderson.com/blog/wp-content/uploads/2008/04/av-1199.png">
</a>

Of course, if this were a real world situation, the link would most likely point to a real place (like the user profile or something), but for now we’ll leave it at this.

Now for the CSS. First we’ll make the link color gray. There’s no real reason for this besides the fact that I want to do so.

a.rollover{
color: #777;
}

we want to hide the image unless the link is being hovered over.

a.rollover:link img{
display: none;
}

and finally we show it (and set its position to absolute) if the link cursor is moved over the mouse.

a.rollover:hover img{
display: block;
position: absolute;
left: 10px;
top: 1ex;
border: 0;
}

we have effectively made the image visible again, made its position absolute (we explicitly place it), given the coordinates of its top left corner, and set it’s border to 0.

the complete html code follows.

<html>
<head>
<style type="text/css">
a:link{
color: #777;
}
a.rollover img{
display: none;
}
a.rollover:hover img{
display: block;
position: absolute;
top: 1ex;
left: 10px;
border: 0;
}
</style>
<title>Fancy Rollovers</title>
</head>
 <body>
 <p>
 <a href="#" class="rollover">
Javayahtzee Icon
<img src="http://www.itsananderson.com/blog/wp-content/uploads/2008/04/av-1199.png">
</a>
</p>
</body>
</html>

I hope this article is helpful to someone!
-Will Anderson

Tags: , ,

This entry was posted on Thursday, April 24th, 2008 at 2:33 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “CSS Rollover Fun”

  1. Kevin Paquet Says:
    May 4th, 2008 at 11:53 pm

    Great tutorial, it’s really helpful indeed. May repost this for our teens to read?

  2. Will Says:
    May 5th, 2008 at 12:05 am

    I’d rather you post a link to this article, but if you’re wanting to translate it, you can do that. Just please leave a link to back to this article if you do :)

    Thanks Kevin,

    Will

  3. Kevin Paquet Says:
    May 5th, 2008 at 12:10 am

    Sure, there will always be a link back to the sites of those people I know. But sorry for those I’m not close with *evil laugh*

Leave a Reply