HTML Working with Images - Setting Your Image as a Hyperlink
(Page 4 of 4 )
Instead of using textual hyperlinks, you may sometimes wish to create hyperlinks using an image, providing for a pertier website. Here is how we do so:
<html>
<body>
<p>
Click the image to learn more about us!
<a href="aboutus.htm">
<img border="0" src="aboutus.gif" width="75" height="50">
</a>
</p>
</body>
</html>
Here, the tag <a href> determines where our hyperlink will lead the user once they click the button. The <img border> is used to set the size of the border, and the src, as before, tells us the location of the image.
Using Image Maps
Another cool way to use an image as a hyperlink is to use image maps. Let's say you had a map of the United States, and whenever a user clicked on a certain state, it would load a page with information about that particular state. Each part of that image has a coordinate, based upon its location on the page. To see how coordinates work, use this code, then hover over your image and look at the bottom left hand corner of your browser; it will display the coordinates of wherever you hover your mouse:
<html>
<body>
<p>
<a href="tryhtml_ismap.htm">
<img src="sample.gif"
ismap width="200" height="200">
</a>
</p>
</body>
</html>
You will notice if you hover your mouse in the bottom right hand corner of the image, the coordinate will be around 200, 200. The top right hand corner will be 200, 0, while the bottom left corner will be 0, 200 and the top left corner will be 0, 0. And of course the center will be 100, 100.
So let's say we wanted to create an image and have three links in it, at different locations. First we would find the coordinates of our link locations, then do the following:
<html>
<body>
<p>
Click on one of the planets to watch it closer:
</p>
<img src="sample.gif"
width="145" height="126"
usemap="#samplemap">
<map id="samplemap" name="samplemap">
<area shape="rect"
coords="0,0,85,125"
alt="Home"
href="home.htm">
<area shape="circle"
coords="90,60,5"
alt="Links"
href="links.htm">
<area shape="circle"
coords="125,60,10"
alt="About Us"
href="aboutus.htm">
</map>
</body>
</html>
And there you have it, your first image map. You will note that the <area shape=> is used to define the clickable region or area of your image map.
Well that is it for this article. In our next tutorial we will discuss working with layout in HTML and possibly fonts if time permits. Thanks for dropping by and be sure to come back often to read more material.
Till then...
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
