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


Posted by Zac1987 on 20 December, 2010

0 comments




Enter your email address:

Subscribe in a reader

Follow zac1987 on Twitter

Chatting Box

Donation

If you feel my website is informative and it is useful for you, please donate some money to support me or buy me a drink. I will continues this good works. Thank you.