Making Image Maps with Image Ready CS2Written by: Pup | This tutorial will teach you how to create an Image Map navigation system.

First, open up the image you want to add the image map to in Adobe Photoshop. I will be using this one:
Image Copyright Neopets, Inc.

Now, add your text that you want to become clickable hyperlinks on your image. Mine looks like this:


Okay, now jump to Image Ready (hold down 'Ctrl, Shift, and M' for 'Windows or Command, Shift, and M' for Macs). Select the Image Map palette by going to Window>>Image Map. Now, select the Rectangle Image Map Tool from the Tools palette.


Using that tool, select the text you want I-mapped.


Now, jump down to your Image Map window. In the "Name" box, type a name for that map. It's just a way to identify the link. In the URL box, type the URL you want your map to link to. That's all you really need, but you can type in the Target and Alt if you want to, but I'm not going to for this tutorial.

After doing all of this for each link you wish to add to your image, click Edit>>Copy HTML Code>>For All Slices. That, my friend, is the code for your Image Map. Paste it into your web page from there. ;)
(Hover over the words below, and click to see my special friends & partners!) (May result with broken links)


I hope this tutorial has helped you! Feel free to email me with any questions or comments!
You have now completed this tutorial! Thank you for using our tutorials service. If you have any questions or comments, then please post your thoughts below.

   

| Written by: Pup | Added: Jul 14 2008 | Last Modified: Dec 21 2009 | Views: 4,709 | (Log in to rate) |

User Comments