Thursday, April 22, 2010

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, 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;
table.rollover td {
border-width: 0px;
padding: 0px;
border-style: none;}
table.rollover td img {
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>
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.


  1. Because that didn't work on Blogger when I tried it. ^_^ Tables was like the 3rd pure-CSS rollover method I tried, and I think the 5th overall (having attempted Javascript tricks at the beginning, which would have required less in-post code).

    I think (if I recall correctly) the Div method required me to set the dimensions of the image in order to work 100%, and that's more effort for each rollover. The Table method works as long as the rollover and original images are the same size, and the _only_ thing I have to put in is the image file location.

    If I still have it, I could try and find the test page with all the different methods on it. I remember some of them couldn't align the original and rollover, or couldn't keep the same size between images without extra work.