Preparing Images
Here are the two images we’ll be using for our rollover. It’s important to make sure they’re the same size.
Regular State:
Rollover State:
The HTML
Newer web browsers support more CSS options than older ones like Internet Explorer 6, but since you’ll probably want your website to work on a lot of different browsers we’re going to limit ourselves to using CSS that IE6 understands. This means that rollover effects are only available on link elements—that’s the tag.
In your HTML, add something like the following code:
<a href="http://www.designmeme.com/articles/" id="rollover"><span>Web Design Articles</span></a>
Notice that we added an extra attribute inside the opening tag. The id="rollover" lets us add styles for this link without affecting the other links on the page.
We’ve also placed <span> tags around the text inside the link. This will also allow us to add styles for the text separately from the link itself.
Next we’ll use CSS to replace the text “Web Design Articles” with a rollover image that changes when you hover your mouse pointer over the link.
The CSS
We’re going to use CSS to add a background image to our link and give it a matching height and width to display the entire image. We’ll then hide the text inside the link by targeting the wrapping <span> tags. Finally, we’ll use the CSS :hover pseudo class to define the alternate image that will display for the rollover.
Before the closing <head> your HTML document add the following
a#rollovertargets the CSS at the link withid="rollover"heightandwidthshould match your rollover imagesdisplay:blockis needed to set a height and width for our imagedisplay:noneis used to hide just the text between the span tags inside the link—but not the link itselfa#rollover:hoveronly needs to include things that are changing when the image is being rolled over—in this case the background image
0 comments:
Post a Comment