Switch to full style
HTML code examples
Post a reply

Show image when click on link

Fri Feb 17, 2012 6:05 pm

In the following example more than one image is used as link but in different cases like hover and click.

Code:
<html>
<
head>
<
title>Many images for one link</title>
<
style type="text/css">
a  {
 display: none;
}
a:link { 
 display
: block;

 background-image: url(2.png);
 background-repeat: no-repeat;
 background-position: top left;
  width: 300px;
 height: 300px;
}
a:link:hover { 
 display
: block;

 background-image: url(3.png);
 background-repeat: no-repeat;
 background-position: top left;
  width: 300px;
 height: 300px;
}
a:link:active { 
 display
: block;

 background-image: url(4.png);
 background-repeat: no-repeat;
 background-position: top left;
  width: 300px;
 height: 300px;
}
</
style>
</
head>

<
body>

  <a href="http://www.codemiles.com" >
   
  
</a>
  
</body>
</
html>

 




Post a reply
  Related Posts  to : Show image when click on link
 Hide the background image by one click     -  
 click,double click,focus,blur and hover actions in JQuery     -  
 image slide show     -  
 Show image using before property     -  
 Show loading image from JQuery     -  
 show the locations of clicks on the image     -  
 How to show full resolution image at clicking on thumnail     -  
 Change the border color of image and its link     -  
 disable right click on your web page     -  
 Detecting right mouse button click     -  

Topic Tags

HTML Link, HTML Image