Unloveme.org

Image mapping is in fact a pain in the butt. But not only is it a pain in the butt, but (lmfao I typed “butt but” :3) it’s automatically invalid if it’s coded the wrong way.
One reason why Photoshop is a bit better than Paint Shop Pro (In my opinion) is because it can code your image-mapping by using the slice tool. It is also valid HTML 4.0 if you edit the coding a little (to match the DOCTYPE). The only downside it that it has a long code because it’s basically tables. But if you’re still interested, continue with my tutorial

Before we start:
I’ll be starting with this picture that I will use to demonstrate this Photoshop function :]

You may start with my image too if you’d like.

Step 1:
Use your slice tool to slice the places you want to have image mapped. Here’s my example:

Step 2:
Still using the slice tool, hover over the area you want to add a link to. Right click, edit slice options, then fill in the information needed. Do it for all the other links too. (You don’t have to fill out unneeded slices.) My example:

Step 3:
Now that you’ve filled out all the needed slices, all you need to do is save and get your code. Follow the needed instructions below:

How to save:
Go to File – Save for web and devices. or press Alt+Shift+Ctrl+S.
Here are your settings when you save:

Hit save and save it as .html for “HTML and Images” as the type.

Final: Go to the folder you saved your newly sliced image in. You should see a folder with your slices and a .html that you saved. Open the webpage. There, you should see your image (hover over your links to make sure you did it correctly). To get your code, go to ‘View’ then ‘Page Source’. Or press Ctrl+U. You need to upload the images in the folder to your own server and change the links accordingly.
Your code should be between the <!– Ready Image Slices–> and <!– End Image Slices–>

And that’s it! Easy peasy, lemon squeasy. Oh, and btw, if you can copy the whole code into a web page and it would work. You just need to insert the DOCTYPE (HTML 4.0).