Rollover Effects Without Javascript:
Let's say you have a table composed of images that act as links and you want to have that nifty roll-over effect where the image changes when the mouse hovers over the image, but you don't want to mess with javascript. I played around with opacity filters with CSS and I figured this should work. I've tested this both in IE and FF and work fine.
Its basically like creating two layers. When the image-link isn't being hovered, the second layer (image) shows on top of the first layer (the background). When you hover over the image, the second layer's opacity is set to "0" which makes it invisible, exposing the background image which would act as the hover image.
Here's what the HTML would be for a table with
one image:
Code:
<table>
<tr>
<td class="cssrollover" background="yourbackground.gif">
<a href="http://yourlink.com/">
<img src="yourimage.gif">
</a>
</td>
</tr>
</table>
This is a basic table consisting of one row and one column, therefore there's one box. You can always add more boxes as long as each <td> tag is given the class of "cssrollover" so that it can be triggered.
I used different options to make sure the opacity change would show up on most browsers, though I've only tested this on IE and FF because I don't have access to other browsers. If anyone can clarify this, I would be grateful.
Before I do the CSS, let me explain how to use the filters properly. The things in bold you
do not change.
filter:alpha(opacity=value
);
This one's easy, the "value" is basically the opacity percentage.
0 would be invisible, while
100 would be showing it completely. That means if you used a value of
50, it would be half transparent.
-moz-opacity:value
;
opacity:value
;
-khtml-opacity:value
;
These three work a little differently. The "value" works as a decimal. Once again, a value of
0 would make it invisble. But this time, a value of
1 will make it 100% visible. To make it half-visible, use the value
0.5. It's basically like taking the percentage, and then converting it into its equal decimal form. (ex: 23% would be 0.23)
The CSS would go something like:
Code:
.cssrollover a img {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
-khtml-opacity:1;
}
.cssrollover a:hover img {
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
-khtml-opacity:0;
}
This code basically says:
If the image isn't being hovered on, it is 100% visible.
If the image is being hovered on, it is 0% visible.
So some of you might still be asking how this works as a rollover. Well, if "yourimage.gif" is invisible, it exposes "yourbackground.gif" which is the rollover-image.
Now now, I know you can easily replace this with a "display:none;" (Though you'd have to set width and heighth values in your table first) or "visibility:hidden", and you are more than able to. It should work exactly the same. The reason I used opacity filters is to show that you can also make the image half-visible if you want to add a graphical effect. If you'd rather go on the display or visibilty route (I prefer visibility because even if the image is invisible, it is still loaded into your browser, unlike the display tag), then use this:
Code:
.cssrollover a img {
visibility:visible;
}
.cssrollover a:hover img {
visibility:hidden;
}
A lot less work huh?