Wibble

Posts Tagged ‘Image Maps’

I have been playing with the header and have thought an image map may be cool to add to this, i havent used one of these for years and last time i did it in HTML.

So the key was to get the code for the image map, which i got from this site

http://riddle.pl/mappet/

You just put in a link to the image you want to image map, then draw the maps then copy the code to the header [in this case].

<div id=”imgmap”>
 <img height=”290″ width=”900″ src=”header.jpg” alt=”" />
 <ol>
  <li id=”area1″><a href=”http://”> area1 </a> </li>
  <li id=”area2″><a href=”http://”> area2 </a> </li>
  <li id=”area3″><a href=”http://”> area4 </a> </li>
   </ol>
</div>

I remove the img line, and just entered the rest of the code in the header.php, the image line was redundant, I also found you have to put the closing </div> tag at the end to get the code inside the header. and of course add the url’s for the shortcuts

Then you have to go to the style.php and add the second part of the code

#imgmap {
 position: relative;
 _zoom: 1;
}

#imgmap li {
 position: absolute;
 display: block;
 list-style: none;
 outline: 0px dashed;
 overflow: hidden;
}

#imgmap li a {
 display: block;
 width: 100%;
 height: 100%;
 _background: url(space.gif);
 text-indent: -1000em;
}

#area1 {
 left: 740px;
 top: 60px;
 width: 153px;
 height: 227px;
}

#area2 {
 left: 55px;
 top: 154px;
 width: 53px;
 height: 48px;
}
#area3 {
 left: 299px;
 top: 105px;
 width: 53px;
 height: 47px;
}

in this code the only changes were the line outline: 0px dashed; whic the generatotr wrote as 1px which of course meant the boxes showed.

That was all there was to it