/* set the size of the definition list <dl> and add the background image */
#imap {
  display:block; 
  width:512px; 
  height:408px; 
  background:url(i/collage1_basic.png) no-repeat; 
  position:relative;
  }
  
  /* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {
  display:block; 
  width:512px; 
  height:0; 
  padding-top:240px; 
  overflow:hidden; 
  position:absolute; 
  left:0; 
  top:0; 
  background:transparent url(i/collage1_hover.png) no-repeat 512px 408px; 
  cursor:default;
  }
/* the hack for IE pre IE6 */
* html #imap a#title {
  height:408px;
  he\ight:0;
  }
  
  /* the <dt><a> hover style to move the background image to position 0 0 */
#imap a#title:hover {
  background-position: 0 0; 
  z-index:10;
  }
  
  /* place the <dd>s in the correct absolute position */
#imap dd {
  position:absolute; 
  padding:0; 
  margin:0;
  }
#imap #pic1 {
  left:3px; 
  top:61px; 
  z-index:20;
  }
#imap #pic2 {
  left:145px; 
  top:31px; 
  z-index:20;
  }
#imap #pic3 {
  left:282px; 
  top:2px; 
  z-index:20;
  }
#imap #pic4 {
  left:105px; 
  top:228px; 
  z-index:20;
  }
  
  /* style the <dd><a> links physical size and the background image for the hover */
#imap a#janaki {
  display:block; 
  width:141px; 
  height:171px; 
  text-decoration:none; 
  z-index:20;
  }
#imap a#birju {
  display:block; 
  width:140px; 
  height:196px; 
  text-decoration:none; 
  z-index:20;
  }
#imap a#bindadin {
  display:block; 
  width:128px; 
  height:227px; 
  text-decoration:none; 
  z-index:20;
  }
#imap a#tke {
  display:block; 
  width:404px; 
  height:178px; 
  text-decoration:none; 
  z-index:20;
  }  
  
  /* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {
  display:none;
  }
  
  /* move the link background image to position 0 0 when hovered */
#imap a#janaki:hover, #imap a#birju:hover, #imap a#bindadin:hover, #imap a#tke:hover {
  background-position:0 0;
  }
  
  /* define the common styling for the span text */
#imap a:hover span {
  position:absolute;  
  display:block;
  width: 200px;
  line-height: 100%; 
  font-family:Arial; 
  font-size:10px; 
  background:#fff; 
  color:#000; 
  border:1px solid #000; 
  padding:5px;
  }
/* the hack for IE pre IE6 */
* html #imap a:hover span {
  width:512px; w\idth:408px;
  }