Blogger Rollovers

In my recent Magic and Not A Spiral posts, I used mouse rollovers to help illustrate the differences between two images. For anyone else who uses Blogger and wants to know how, here is a handy guide.

First, Blogger doesn't (easily) allow Javascript, so this will be pure CSS. Second, I wanted the rollover code in the post to be as small and repeatable as possible. So, I used Tables (gasp!).

There are two pieces of formatting code.

Piece Number One
This goes in Layout | Edit HTML, somewhere in the CSS layout. If you don't know what the CSS layout is, ....you probably shouldn't be playing around in the HTML. So, this guide is not for you. For everyone else, here's what to paste in:

table.rollover {
 border-width: 0px;
 border-spacing: 0px;
 border-style: none;
 background-repeat:no-repeat;}
table.rollover td {
 border-width: 0px;
 padding: 0px;
 border-style: none;}
table.rollover td img {
 padding:0px;
 border:0px none;
}
table.rollover:hover img {visibility:hidden;}

What this does is, when you create a table with the "rollover" class, it will hide any image inside the table, which will leave any background image visible. It also removes table and image borders, as my normal layout has those.

Piece Number Two
Now, whenever you want to include a rollover image, all you have to do is use:

<table class="rollover" style="background-image:url(rolloverimage)">
 <tr><td height="73"><img src="regularimage" /></td></tr>
</table>

Set "rolloverimage" to the url of the image you want displayed when the mouse is over, and "regularimage" to what you want shown normally. (I don't remember why I put height=73 in there, but it works for any size image [except maybe those with height less than 73?]).

Voilà, pure CSS rollovers usable on Blogger. And here are some examples in action, using Calvin re-enacted by seefresh's lovely wife.