Expanding the skillset: Advanced CSS Rollover effect without javascript

For a while I’d been using javascript for image rollover effects. They were fairly simple to implement and had the desired effect. However, if javascript was disabled visitors missed out on this. In addition to this I try to avoid javascript if there is a css solution.

I started using the css a:hover psuedo class to set a different background image. This mean a button had to be an element such as a div and have a background image set. The downside to this is it was sometimes it was difficult to get the exact effect desired.

More recently I’ve started using the alpha transparency filter in conjunction with the a:hover class. This has several benefits.

In some cases you can use a single image and just vary the opacity of the image with css when you hover over it. You can see an example in the main navigation on a site I am working on here. The advantage of this method is you can swap out the images anytime and the hover over effect with still remain. Also means faster page loading for visitors as there is one image instead of 2. The effect can be applied on a large number of images or text with a single css style rule making it easy to apply to existing webpages.

The css needed to make all links containing images to have this effect would go something like this:

a:hover img {
filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
}
Notice there are 3 rules applied to this style all doing the same thing. The first is for internet explorer, the second for Mozilla/firefox, the last for other browsers such as Opera and Safari. This is because this isn’t officially supported but it does work accross the major browsers (Firefox, Safari, Opera, and IE7 - IE6 supports jpg and gif but not PNG transparency)..

The second way to use this technique is over background images. If you want to make something in a background image have a rollover effect, such as a making a part of an image a button. This is achived by placing a white (or black) image over the top of the portion of the image and varying the opacity of the covering image. You can see this in action on a recent contest I designed for Gamespot UK and Amazon.co.uk. The 5 images under the entry form “light up” when you hover over them. This was achived by placing 5 white images over the background image and setting their opacity to “0″. When the mouse hovers over the opacity is changed to “20″ or “.20″ depending on your browser. In hindsight I should have created these images 1px by 1px and stretched them to save download time, however, it demonstrates the posibilities. In this example I had trouble lining up the white images over the background across all browsers so I opted for setting all the “buttons” in the background image as the background of a smaller div into which I inserted my boxes. This wouldn’t happen if I had reset all the default browser values using Yahoo!’s CSS reset as this removes the differences between browers margin, padding settings etc.

Anyway have fun trying out this technique and leave feedback if you get stuck or manage to use it on a project.

More Expanding the skillset articles to look out for are using flash and javascript to replace text with the fonts you wish you could display - yes I’m talking about sIFR

Expanding the skill set: JavaScript and CSS Background Changer

Once again I find myself confronted with having to use Javascript for a project. This time a dynamic background changer was needed (aka skin toggle). Using my feeble JavaScript Skills and a bit of copy and pasting I manage to put together a working template.

Here is an example. You can change the background of this site by clicking on the following thumnails:

How it works:
Firstly the background images are created/selected and placed in a folder together. Next name them the same with a just changing a number/letter/word at the end that. I recommend numbering them sequentially.

In an image editor crop small area of the image you will use as a button for it. You can of course use text buttons instead. In this case I have chosen to make the area around the buttons to change background to match the background image. If you want this effect then crop the large background images into smaller ones that match the size of the area you want to skin. Name the small background images the same as their larger counterparts adding a letter/number to the end. In the example I have used letter ‘a’.

Continue reading »