This tutorial will cover how to create an image map using Adobe Photoshop version CS2 on a Windows machine. However, I believe that this process is the same for all versions of Photoshop.
What is Image Mapping?
Image mapping is where you can take a single image and break it into interactive pieces, so that different areas will take the user to different websites or different pages or links within your own website. After the image map is created, a new image file and an associated html file will be created. You will upload the new image file to your website and then place the html where you want it to go, whether this is on a sidebar or within a blog post.
My blog is built using wordpress.com, and unfortunately wordpress.com does not allow for html to be used in the header image. But I’m all set to go, incase I make that upgrade!
So, for kicks and grins, here is my header image as I wish I could display it. Move around on the graphic to see all of the “hotspots”. Click on each section to go to various places on my blog, all from one image.