CSS Mouse Click Change Picture

You must have 3 different pictures :
1 - display the picture when the mouse is out from the picture.
2 - display the picture when the mouse is pointing on the picture.
3 - display the picture when the mouse is clicking on the picture.
Please use your mouse to point on the picture below, and click it to see the different pictures.

Code :
HTML :
<div id="header1" width="259px"><a href="http://your-website-link"></a><img src=http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3b.jpg style=margin-left:259px; margin-top:-128px;/></div>

CSS :
#header1 a {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:link {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:hover {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a2.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:active {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a3.jpg);
height:128px;
width:259px;
display: block;
}

Note : Browser will not load the other two pictures when the mouse is out of the 1st picture. The user cannot see the 2nd picture immediately when the mouse is pointing on the 1st picture, the user must wait for few seconds then only can see then 2nd picture because the browser need few seconds to finish load the 2nd picture. So you need to preload the 2nd and 3rd pictures even when the mouse is not pointing / clicking them. You can use css code display:none to do the picture preloading because browsers will still loading the picture which is display:none. For example, you can simply copy the code below :
<img src="http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a2.jpg" style="display:none;"/>

<img src="http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a3.jpg" style="display:none;"/>
and paste it anywhere at your html code.

You can download the picture PSD file from : http://ye5.blogspot.com/2010/12/photoshop-pressed-button-and-glassy-top.html

Related Posts by Categories