2 replies to this topic

[Mezulu]

Here I will show you a simple way to do an image rollover without needing to use JavaScript.

If you're wondering why you wouldn't want to use JavaScript, the easy answer is because not all users have scripts enabled, and thus a large amount of people using your site may not get full functionality from it. So if you are using image rollovers for buttons or navigation menus on your site, you definitely want them to work, right?

To ensure that you have cross-browser, all-user functionality for your image rollovers, the best method I know of is to use CSS.

If you don't already know what CSS is, you may want to rethink the way you are coding your websites. CSS stands for Cascading Style Sheet, and it pretty much revolutionized the look and feel of websites. It can be used to control the look and behavior of pretty much any HTML tag or element.

Okay, now comes the fun part.

We'll pretend that we're using the rollovers to create buttons for a website.

Here's the CSS for the rollover:

.button{

	width:125px;
	height:50px;
	background:url(button.jpg);
}

div:hover.button{

	width:125px;
	height:50px;
	background:url(button2.jpg);

}

Just replace the url of the image for whatever you want to have rollover, and adjust the height and width of the div accordingly.

Here's the HTML:

<div class="button"></div>

That's it! I've tested this in all browsers, and it works fine. It's just a simple trick that can save you a lot of time and energy, and stop you from having to mess with JavaScript. Enjoy!

[akiratheoni]

I recall doing this with one of the homepages of Zantherus that we had. It worked in all browsers but IE6... >.<

[Red Phazon]

Nice. I've wasted much time trying to find something like this in the past and didn't succeed.