If any of you have surfed over to my webcomic, Monkey Law, you may have noticed that the “First,” “Previous,” “Next,” and “Last” buttons are rollovers. I realize, though, that I never really give any instructions for how to make rollovers work in stripShow. One thing you might also wonder is, since stripShow doesn’t assign DHTML items like ID to the navigation buttons, how can you make them into rollovers, since JavaScript has nothing to grab on to?

The answer is I don’t use JavaScript. I use pure CSS.

So here, without further ado, is a tutorial.

First, let’s take a look at the block of code I use for the navigation bar in my sidebar.php file:

<table border="0" cellspacing="0" cellpadding="0">
 	<tr>
 		<td><span class="arrow"><span class="first_day"><?php first_comic('<img src="'.get_bloginfo('stylesheet_directory').'/images/first_day.gif" alt="First Comic" />') ?></span></span></td>
 		<td><span class="arrow"><span class="previous_day"><?php previous_comic('<img src="'.get_bloginfo('stylesheet_directory').'/images/previous_day.gif" alt="Previous Comic" />') ?></span></span></td>
 		<td><span class="arrow"><span class="next_day"><?php next_comic('<img src="'.get_bloginfo('stylesheet_directory').'/images/next_day.gif" alt="Next Comic" />') ?></span></span></td>
 		<td><span class="arrow"><span class="last_day"><?php last_comic('<img src="'.get_bloginfo('stylesheet_directory').'/images/last_day.gif" alt="Last Comic" />') ?></span></span></td>
 	</tr>
 </table>

OK, the main thing you’ll notice about this is that it’s totally unremarkable. All the individual links are inside a span with a class of “arrow.” Each link is then enclosed in its own span, with a class based on its function — “previous_day,” “next_day,” etc. (I recommend using classes instead of IDs as you may, like me, want multiple navigation bars on the same page.) The images themselves are perfectly normal, and appropriate for the “on” state of the arrow.

For the rest of this tutorial, I’m going to focus on only one of these arrows, the arrow for the previous day’s comic.

In fact there are three arrows for each navigation button. One is the “normal” button, the second shows what the reader sees when that button is disabled, and the third shows the button when it’s “active” or has the reader’s mouse hovering over it.

Here are the three arrows:

OK, let’s take a look at my CSS for the “previous_day” class.

.previous_day, .next_day, .first_day, .last_day {
display: block;
height: 25px;
width: 32px;
}

All of my arrows are the same size, so I lump all the sizes together. The sizes are simply the size of the image.

.previous_day {
background-image: url(images/previous_day_disabled.gif);
}

Here we have the start of the individualized classes. Check it out — the background of the class is actually the disabled arrow. That way, when stripShow displays no arrow (such as when the reader is viewing the first comic) then the background shows through and Bam! A disabled arrow that can’t be clicked.

OK, so that’s how the disabling of the arrow happens. What about the rollover? Well, it’s all done using CSS — no Javascript at all.

First, we assign some properties to the actual link that encloses the arrow. This is because Internet Explorer, that notorious piece of crap, will only honor the CSS “hover” selector on an <a> tag.

.previous_day a {
 display: block;
 width: 32px;
 height: 25px;
 }

So now the <a> tag itself takes up the whole size of the class — I know, it looked like it did before, but trust me.

.previous_day a:hover { background-image: url(images/previous_day_active.gif);}
.previous_day a:hover img {visibility: hidden}

Here’s where the magic is done — when the user mouses over the arrow, the <img> tag (which is within <a>, which is within the span that’s styled as “previous_day”) becomes hidden — it still takes up the same amount of space, but cannot be seen. And at the same time, the background becomes our “previous_day_active.gif” image. Voila!

Now, when you try this, you may notice a delay on the first rollover of each graphic. This is the new background (the “active” graphic) loading. To prevent this, I take all my “active” graphics, and put them in a <div< at the bottom of my footer.php file, out of the way:

<img class="hideMe" src="<?php bloginfo('stylesheet_directory') ?>/images/first_day_active.gif" alt="" height="0" width="0" />
<img class="hideMe" src="<?php bloginfo('stylesheet_directory') ?>/images/previous_day_active.gif" alt="" height="0" width="0" />
<img class="hideMe" src="<?php bloginfo('stylesheet_directory') ?>/images/next_day_active.gif" alt="" height="0" width="0" />
<img class="hideMe" src="<?php bloginfo('stylesheet_directory') ?>/images/last_day_active.gif" alt="" height="0" width="0" />

And there it is. The code that gives Monkey Law navigation rollovers, easily adaptable to your own stripShow installation. Enjoy!

This entry was posted on Thursday, August 30th, 2007 at 1:08 pm and is filed under Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.