Image Mapping

An Image map is an image with links on it, such as:

So first, your going to need the image/layout/graphic etc. that you want to make an image map. Here’s mine:

Open it up in PSP. Go to File>>Export>>Image Mapper.

A window should pop up:

Select the tool, Which is on the Image Mapper window. Using the tool, make a box on your image you want as a link. I will make a box on the ‘visitor’ text first.

Now you have to fill in the ‘Cell Properties’. For URL, put the page URL you want the box you made to link to(I made a box on Visitor, so I will put the visitor URL.). You can add the alt text(when you hover) and you can also add the Target. I left my target blank because I want it to open in the same window.

After you’ve done that to all your links, change the ‘Format’ to JPEG, and click on ‘Save to clipboard’. Then after you save it, open notepad and do CTRL + v, or paste.

Now, in your code, you should find the image path: Where mine says image path, that is where you should put the URL of the image for your Image map. By now your pretty much done!

Final result:
(click on the links!)

Visitor!

Here’s the code:

<img name="imagemapexaample0" src="http://i707.photobucket.com/albums/ww80/blewpaws/Smilies/Tutorial%20Screenies/imagemapexaample.png" width="500"<br /> height="200" border="0" usemap="#imagemapexaample" alt="" /></p> <map name="imagemapexaample"> <area shape="rect" coords="5,7,126,57" href="http://stardrops.info/wp/visitor/" alt="Visitor!"> <area shape="rect" coords="136,9,257,58" href="http://stardrops.info/wp/owner/" alt=""> <area shape="rect" coords="263,10,347,70" href="http://stardrops.info/wp/site/" alt=""> <area shape="rect" coords="353,6,470,61" href="http://stardrops.info" alt=""> </map> <p>

jeniffer   February 10th, 2010 @ 8:42 am

sis, I already made this, but I don’t know where to paste this, in my stylesheet? it doesn’t replace the Background image.. :(


Jeniffer   February 10th, 2010 @ 10:26 am

Oh yeah, I got it. i just forgot, just delete this. Thank you!


:D :) ;) :P :love: >:( :?: :sad: :lol: :(