Page 60 - DCAP202_Fundamentals of Web Programming
P. 60
Unit 5: Creating Tables
Notes
Task Give examples of the attributes used with <img> tag.
5.3.6 Creating Image Links
Image links are constructed as you might expect, by embedding an <img> tag inside of an
anchor element <a>. Like HTML text links, image links require opening and closing anchor tags,
but instead of placing text between these opening and closing tags, the developer needs to place
an image tag — with a valid source attribute value of course.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href=”default.html”>
<img src=”smiley.gif” alt=”HTML tutorial” width=”32" height=”32"></a></p>
<p>No border around the image, but still a link:
<a href=”default.html”>
<img border=”0" src=”smiley.gif” alt=”HTML tutorial” width=”32"
height=”32"></a></p>
</body>
</html>
Output
Create a link of an image:
No border around the image, but still a link:
5.3.7 Image Maps
Image maps are images with clickable areas (sometimes referred to as “hotspots”) that usually
link to another page. If used tastefully, image maps can be really effective. If not, they can
potentially confuse users.
To create an image map:
1. You need an image. Create an image using the usual method (i.e. via an image editor, then
save as a gif or jpeg into your website’s image folder).
2. Use the HTML <map> tag to create a map with a name. Inside this tag, you will specify
where the clickable areas are with the HTML <area> tag
3. Use the HTML <img> tag to link to this image. In the img tag, use with the usemap
attribute to define which image map to use (the one we just specified).
Example:
<img src =”/pix/mueller_hut/mueller_hut_t.jpg”
LOVELY PROFESSIONAL UNIVERSITY 53
