XHTML
Display Picture Make Text Link Make Image Link Basic Text Attributes Make a List Easy Back Button HEX ColoursCSS
Font/Colour Attributes Roll Over-text Roll Over-image Borders Float Margins Padding BackgroundsOther Useful Tips
Add to Search Engine TermsRoll Overs: Image
Here’s where things get a little bit different. For this method, we need three different images, I will use these ones as an example. Please note that the third one is not required, but it is an added bonus:
Then set up a link with an id like this <a id="my_sweet_link" href="my_page.html"></a>.
Also notice how the link doesn’t have any text or images programmed just before the </a>. You do want that to be blank, the CSS will take care of the rest. In your CSS you will require 3 different Style Rules:
CSS
What The Code Does
a#my_sweet_link {
display: block;
width: 130px;
height: 80px;
background: url(images/a_link.jpg);
}
a#my_sweet_link:hover {
background: url(images/a_hover.jpg);
}
a#my_sweet_link:active {
background: url(images/a_active.jpg);
}
Within the first Style Rule:
display: block; simply means that there is block of information that you wish to display. The height and width determines that. You want the dimensions
background: url(images/a_link.jpg); is what is used to locate the image, you'll notice that it is somewhat similar to you would to for XHTML. You could also have a HEX colour instead of an image: background: #00ff00; if you wanted.
Within the second Style Rule:
background: url(images/a_hover.jpg); This command will make the image change to the second image when your mouse rolls over it.
Within the third Style Rule:
background: url(images/a_active.jpg); For when you click on the image, this third one is not a requirement.
