I have had a few people ask me how I get the effect of changing my picture into “Snydley” on this page:

http://www.craftwebproject.com/unit4/index.html

Here is the code that makes it work:

XHTML

<div id=”pix”>
<a href=”index.html” title=”Put Your Title Here” class=”rollover”><br /></a>
</div>

CSS

a.rollover:link,a.rollover:active,a.rollover:visited
{
background-color:#000;
background-image:url(../images/image1.jpg);
display:block;
height:136px;
width:181px;
}

a.rollover:hover
{
background-color:#000;
background-image:url(../images/image2.jpg);
display:block;
height:136px;
width:181px;
}

(In the code above, I have changed the names of the actual image.jpg files to make them generic.)

…Bill