Home » Tutorials » Image Mapping

This tutorial is for image mapping in Adobe ImageReady ONLY.

STARTING: Open up a picture in imageready that you would like to map. I will be using this:


STEP 1: Before you can start mapping, make sure you have the Image mapping window open. If you don't, go to Window > Image Map.


STEP 2: Next, select the tool Rectangle Image Map Tool (P) on the side bar.


STEP 3: Border/Rectanglize the word/text you want for a link. I am mapping the text 'KWINSTURR.COM'.

Once you've let go, it should look like this:


STEP 4: Once you've let go, go down to the Image Map window, be on 'Image Map' and place in the URL. My link/URL is http://kwinsturr.com.


Continue the steps 3-4 with the rest of the texts.


STEP 5: After you're alll done mapping the texts, go to Edit > Copy HTML Code > All Slices.


STEP 6: To check that your code's been actually copied, open up notepad and paste (CTRL+V) . This is the coding for my image mapping. For my "image/United-11.gif" of your's, replace it with the URL of your image. My replacement would be "http://kwinsturr.com/Tutorials/IMGs/ImageMapping/tut-imagemapping-01.gif" .


PLEASE NOTE: Myspace does not allow image mapping.