swap images using CSS not Java Script

[GoldenZ]

Hello All,
Today i'm going to show you how to Swap images using Pure CSS Instead of Java-Script with Firefox and Internet explorer comparability.

Basically most of us started using FrontPage, and they end with Dreamweaver, thats what i'm since using 5 years.


Swap Images:
This is a replacement of the Swap image in Dreamweaver using a Java Script code which can cause an error to some ppl.

To-do that, You need to do the following:

Create a Div in your Favorite editor and call it whatever you want ex. Box

<div class="box"><a href="#"></a></div>

in this method i will not place the image on the div as insert image, but i will embed the image in the a href as a background.

.box a {
	display: block;
	background-position: 0px 0px;
	background-image: url(img1.jpg);
	height: 300px;
	width: 300px;
}

It is SO IMPORTANT to give the a href class a Block display, else the hover won't work.

and the a:hover class will be the 2nd image you want to show when mouse over

.box a:hover {
	background-image: url(img2.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 300px;
	width: 300px;
}

Thats it. works with firefox and internet explorer all versions.

View it Live here
Source Code at the Attachment

Regards,
-Amr