Learning Report 5
Rollover Images in CSS
Resource: http://www.elated.com/articles/css-rollover-buttons/
What did I learn?
This week I learned how to create rollover images using CSS, rather then javascript. I've found that is probably a better method to use, because I can include the code in the CSS stylesheet I'm already using, and save my users the load time of pulling up an additional javascript file.
The tutorial I used showed a couple different methods for doing this. Using either method, you first two images, one to be the normal image, and the other to be diplayed with the mouse hovers over it. In one method, you use code that will swap the two images when the mouse is rolled over, similar to javascript. In the other method, you combine the images into one file, and the code tells the browser to display a different portion of the image depending whether or not the mouse is hovering over it. This method is useful because it eliminates the quick flash that you get when employing the previous method. This flash occurs because the server will not preload the second image, it doesn't grab it until the second image is called for when you hover over it.
How did I implement it?
I implemented this technique with some buttons on the aside of my index page. These buttons are additional links to my resume and portfolio. I ended up having to use the less effective first technique of CSS coding because I lack adequate image editor to do the second technique, but in time will switch over to the second technique. I'll show the code for both techniques.
So first off, I needed to create the images for the button, so here is what I created for the resume button:
Next the code. With either method, you begin your code in the html file:
<a id="resumeButton" href="/resume.html" title="View My Resume"> <span> View My Resume</span></a><img src="/images/resume1.jpg" alt"Resume">
The main point to remember is that you must give the hyperlink element an id that will be used in the CSS file. The span element is used to provide text that will appear if the browser does not use CSS files. This next code goes in the CSS file. If your using the more effective second method, the code looks like this:
#resumeButton {
display: block;
width: 107px;
height: 23px;
background: url("resume1.gif") no-repeat 0 0;
}
#resumeButton:hover {
background-position: 0 -23px;
}
#resumeButton span {
display: none;
}
For the less effective first technique, only one portion of the code is different:
#resumeButton1:hover {
background: url("resume2.gif") no-repeat 0 0;
}
Again, either method will work, the second will just have a little flash the first time your user rolls the mouse over the image. You can view the finished product on the Home Page.
