If you’re a novice web designer or perhaps you haven’t had the time to brush up on CSS in the past few years and prefer of designing websites directly in a WYSIWYG editor such as Dreamweaver, then I’m sure you’re familiar with creating rollovers. I bet you’re also aware of the bulky javascript that ends up generating in your HTML file.

The image at left shows a completely javascript free rollover. It’s accomplished with just a few lines of code, 1 image containing both the normal and the hover state and a single pixel transparent GIF file which will act as place holder for the effect.

Here’s how it’s done:

Lets begin by creating the image that we wish to apply a rollover effect to. In the example at top, I cropped out an image of my dog, Peanut. In order to simplify this tutorial, lets use a simpler, smaller sized image.

I created a prepared image at left, which you can right-click on and save for your own use. Note how the image is actually duplicated and stacked one on top of the other. This is because we will use a CSS trick to mask the top portion of the image as it loads on our page and reveal the other portion of the image as we hover over it.

The hover effect is created by the following CSS:

.check {
	background-image:url(check.png);
	background-position: 0px 0px;
	width: 87px;
	height: 75px;
	}

.check:hover {
	background-image:url(check.png);
	background-position: 0px -75px;
	width: 87px;
	height: 75px;
	}

Our full image measures 87px wide by 150px tall. We’re cropping it at 75px tall, which is exactly half of our image height, thus revealing only the top portion of the image (the grey check). For the hover effect to work properly, we are telling the background image to position itself up with a value of -75px, which creates the illusion of a rollover effect.

The HTML looks like the following:

<div class="check">
<img src="check-dot.gif" width="87" height="75" />
</div>

The image that we’re placing in the HTML “check-dot.gif” is an additional image we need to create measuring 1px tall/wide. It’s important that this image is saved as a transparent file, preferably a GIF file. We wrap that image between the “check” class that we’ve defined in the CSS and we’re done. The final effect is shown at left.

Having successfully achieved the effect I wanted to take it a step further by having the 2 images change based on local time here in Hoboken, NJ, giving our site a more personal feel. Our CEO however, gave me a challenge by stating how great it would be to have our site changed based on our local weather conditions.

The biggest challenge was finding a weather source online with an open API. I found that not only was Yahoo the ideal solution for this task, but that the site had over 47 different potential weather conditions for any US zip code allowing me to pull the variable directly through an RSS feed.

I chose to work with the top 9 weather conditions, by creating 9 CSS files which load on the site based on the current forecast here in Hoboken. Combined with the day and night script the Tisha Creative website has 18 distinct looks which will load based on time and weather.

The website follows strict XHTML web standards and validates with W3C. I’ve utilized JQeary library in displaying the various sub-content of each section of the website.