logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g Web Design Site

BellaOnline's Web Design Editor

g

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” closing bracket /a. *I can't put the correct HTML here in the brackets or it will actually do the HTML* 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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 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


g features
Using Website Templates

CSS Design Layouts

10 Tips for Great Content

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor