Show image when click on link

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>

 

_________________
M. S. Rakha, Ph.D.
Queen's University
Canada

Author: DrRakha
Mastermind

Posts: 2715
Have thanks: 74 time

Page 1 of 1

[ 1 post ]

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 -
Show image using before property -
image slide show -
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

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com