This weeks answer is in response to a reader question - “Can you explain how to make a picture link to a page in HTML”. There are a couple of different techniques you can use for linked images. One is to link the entire image with your HTML and the other is to do an image map – where different parts of the same image are linked to different locations.

Linked Image in HTML

Linking a small image or icon is very simple all you have to do is place your image link within the hyperlink like so:

<a href=”link.html”> <img src=”img.jpg”> </a>

All I did here was to enclose the image within the html for the link. This is the easiest and most effective way to link a small image and is often done with custom bullets, icons, etc. But, what if you want one large image to link to several different places? This is where image slicing comes in handy.

Image Slicing in Photoshop

This is very easy to achieve in Photoshop. You should use an image that is not overly complicated, because you want your users to be able to see where to click on the image clearly. You also want to ensure your users understand that they need to click within the image to get where they are going. Develop image maps carefully with your user in mind. Keep in mind image maps are not usually as search engine friendly as text on a page, however proper use of alt tags within your image slices can help with this.

Once your image is created, the next step is to “slice” your image. The slice tool icon looks like a little exacto knife. It's near the top of the toolbar and located beneath the crop tool – if you click on the “crop” icon, the slice and slice selector tools will appear.

Select the slice tool, hold your left mouse key down and carefully drag the slice where you want it and then release. Move on and continue slicing the entire image. There should be a slice around every area of the image you want to link to another page. Any large white area can be one slice.

After your image is fully sliced, the next step is to use the “slice select” tool, click on each slice and from there choose the slice type “image”. Beneath that fill in the url of where you want this slice to direct followed by the alt tag field at the bottom. The other fields are not necessary for simple image mapping. Move through each slice in the same manner until the entire image is mapped out.

Once your entire image is complete you will use the option “save for web and devices” If you click “File” on top and look down beneath the typical save options, you will see the option to save for web and devices. Select this option and a dialog box will open up where you can preview what your image will look like. If you are satisfied with it, press the save button and another dialog box opens up. Be sure the second option says “save images and HTML”, then save your work.

Go to your folder where you saved the HTML document and open it. You can copy and paste this code into your own HTML file. Typically this HTML will be a little sloppy. If you're proficient in HTML you can clean it up to your liking, but it should work just fine as is. Be sure, as always, your image files etc are in the correct locations otherwise your image won't display.