Easier/Faster ways to ImageMap pictures

Photoshop Tutorials


Click on thumbnailed images to enlarge

**pay close attention to instructions 9 through 11!!

i'm going to be sampling with this picture:

1.create an image on your program like the one above.

2.With that image, go file>jump to>Adobe ImageReady or Shift+Ctrl+M

3.Then on ImageReady click Window>Image Map
if its not open

4.Click this:

click on that icon until that little table pops up

5.with that tool, make a box around one of the words you want linked.

6.After, fill out the Image Map table

7.And just continue doing the same things with your other words.

8.After filling it all out click this button:

9.copy the following:

make sure you copy it exactly right
click to enlarge

if you want to use this image map on your website, make sure you delete this part of the code

11.AND upload your imagemap on an image hosting site
get the "DIRECT LINK" and insert in in here:


Tutorial Comments

Showing latest 10 of 39 comments

thanks i love this :DD helps alot ^^
but i can't change the ploygon tool thing :<
all i have is the rectangle tool so i can't change anything bent and its really irritating Dx do you know why? ; o ;
i right click and press p but no change >.

By yuffiehx on Oct 11, 2009 11:11 pm

what do you mean by op the top?

By brittneybx3 on Jun 23, 2009 4:17 pm

this tutorial is awesom and my raquel reed image map works great BUT i wanna know how i would get it at the top of my myspace profile

By PorclehnDoll on Jun 5, 2009 3:33 pm

WHAT I DO FOR DIVS, I JUST MAKE A SEPARATE BOX FOR IT. You know? Cause for divs, you code separate boxes for what you want, you should just code a box in, and put the imagemap in it.

By brittneybx3 on Apr 13, 2009 9:07 pm

thank you soooo much!

By sunshine07 on Feb 18, 2009 5:48 am

nvm, Thanks a lot!!! :)

By Pollyee on Feb 7, 2009 12:42 am

This is a great ass tutorial... How are you suppose to uh...put it as an ACTUAL contact box? help pls.

By Pollyee on Feb 1, 2009 12:15 am

why when i put the code into a div layer it doesnt work?
i mean, the image appreas but the links does not work at all.

By Fab777 on Nov 26, 2008 11:51 am

how do you image map in adobe fireworks CS3?

By NikkiLea324 on Sep 5, 2008 11:53 pm

is this feature available for photoshop cs3?
if not, what version of photoshop did you use?
so i can please get it.
thank you :)

By cassiekablam on Jul 14, 2008 3:31 pm
View all »

Tutorial Details

Author brittneybx3 View profile
Submitted on Jan 5, 2008
Page views 30,171
Favorites 96
Comments 39
Reviewer IVIike View profile
Approved on Jan 5, 2008

Tutorial Tags