g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g Web Design Site

BellaOnline's Web Design Editor


Creating Image Links and Image Maps

Guest Author - Christin Sander

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.
This site needs an editor - click to learn more!

Add Creating+Image+Links+and+Image+Maps to Twitter Add Creating+Image+Links+and+Image+Maps to Facebook Add Creating+Image+Links+and+Image+Maps to MySpace Add Creating+Image+Links+and+Image+Maps to Digg Creating+Image+Links+and+Image+Maps Add Creating+Image+Links+and+Image+Maps to Yahoo My Web Add Creating+Image+Links+and+Image+Maps to Google Bookmarks Add Creating+Image+Links+and+Image+Maps to Stumbleupon Add Creating+Image+Links+and+Image+Maps to Reddit

RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Web Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 by Christin Sander. All rights reserved.
This content was written by Christin Sander. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.


g features
Using Website Templates

CSS Design Layouts

10 Tips for Great Content

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor