How to Create Web Links Within an HTML Picture
Images can be an attractive and highly functional way of integrating links into your web page. Images are a large component of engaging web design; a plain text website is rarely seen, and often unattractive. The links on your website can be either text or image. In fact, a linked, clickable image generally makes for a more intuitive user experience. Thankfully, there are two relatively straightforward approaches to integrating links into images within HyperText Markup Language (HTML).
Other People Are Reading
Things You'll Need
- Image
- Image editing software (optional)
- Word processor
- Knowledge of HTML
- Web developer add-on (optional)
- Image mapping tool (optional)
- Web browser
Instructions
-
The Image
-
1
Design your image in an image-editing program. Alternatively, you could obtain your image from elsewhere, but always make sure that you have the right to use an image and that you give credit to its creator.
-
2
Make sure that your image meshes well with the other visual aspects of your web page. Make sure the other colors used in your web page are not jarring or distracting when viewed alongside your image.
-
-
3
Save your image in the same folder as your web page. Make sure it is of an acceptable format for HTML.
The <img> Tag
-
4
Open your web page in a word processing program. Use the "Open With..." function when you locate your web page in its folder; usually, double-clicking on an HTML file will open it in your default web browser. You do not want to do this yet.
-
5
Find the link in your web page, and place an <img> tag within the <a href> tag. For example:
<a href="link.html"><img src="yourimage.jpg"></a>
This will create an image that functions as a link. Use this approach if you wish to use your image for only one link.
-
6
To eliminate the border around your image, insert border="0" into your <img> tag:
<a href="link.html"><img src="yourimage.jpg" border="0"></a>
-
7
To cause text to pop up when the cursor hovers over the image, insert alt="your text" into your <img> tag:
<a href="link.html"><img src="yourimage.jpg" border="0" alt="your text"></a>
Image Maps
-
8
If you wish to use one image for multiple different links, you will need to create an image map. Open your web page in a word processing program.
-
9
Place your image into the desired place in your code using the <img> tag. Use the usemap attribute to designate the map you will be using:
<img src="yourimage.jpg" usemap=#yourmap>
-
10
Create a <map> tag with an identical name:
<map name=yourmap>
-
11
Within the <map> tag, create areas corresponding to the parts of the image that will be active links. Specify the corresponding shape of the area and the range of the x-y coordinates. Then specify the appropriate link. For example:
<map name=yourmap>
<area shape=rect coords=0, 0, 50, 50 href="link.html">The coordinates are listed in the order x1, y1, x2, y2. The example would create an active link in a square area between x values from 0 to 50 and y values from 0 to 50. A web developer browser add-on or other image mapping tool is useful for determining the applicable coordinates.
-
12
Create as many areas as needed, with the desired shapes (rectangle, circle or polygon), and then close your <map> tag with </map>.
-
13
Open your web page in a web browser and make sure your image is functioning as desired. If not, continue to make edits in your word processing program.
-
1
