Image maps are clickable areas created within an image, allowing navigation to other pages. One single image is separated into sections, each acting as an individual link.
Though a program like Dreamweaver is the most convenient, Notepad or Textedit will also do the job. A simple image map, like the example in this tutorial, will only take a matter of minutes to create. The first time may take a little longer as the process is learned, but subsequent image maps will indubitably require less time.
1: Begin with a basic html page, including all the essentials like html, head, body, etc. (created automatically in Dreamweaver). I did mine however just in Notepad. It will appear as follows:
<html>
<head><title>Image Map</title></head>
<body>
</body>
</html>
2: Add your image using the basic image tag.
<html>
<head><title>Image Map</title></head>
<body>
<img src="80703071.jpg" />
</body>
</html>
3: Using the map tag, and name attribute, begin creation of your image map. Make sure to close the map tag.
<html>
<head><title>Image Map</title></head>
<body>
<img src="80703071.jpg" />
<map name="puppykitteh">
</map>
</body>
</html>
4: Using the area tag, and shape attribute, set the shape of each area on the image. The shape can either be a rectangle (with the top right and bottom left coordinates), a circle (using the center coordinate and radius), or a polygon (using as many coordinates as you could ever desire).
<html>
<head><title>Image Map</title></head>
<body>
<img src="80703071.jpg" />
<map name="puppykitteh">
<area shape="rect" />
</map>
</body>
</html>
5. Inside the area tag, set the coordinates of the shape, in this case the top right and bottom left coordinates. They are measured in pixels and any image-editing program (in this case, Pixlr) is able to give you those coordinates.
<html>
<head><title>Image Map</title></head>
<body>
<img src="80703071.jpg" />
<map name="puppykitteh">
<area shape="rect" coords="380, 157, 34, 478" />
</map>
</body>
</html>
In this example, 380, 157 is the top right corner of the rectangular shape we are creating, with 34, 478 as the bottom left. It will encompass the image of the puppy.
6. Also inside the area tag, using the href attribute, set the destination of the link.
<html>
<head><title>Image Map</title></head>
<body>
<img src="80703071.jpg" />
<map name="puppykitteh">
<area shape="rect" coords="380, 157, 34, 478" href="puppies.html" />
</map>
</body>
</html>
In this case, it points to another page located in the same folder, named puppies.html.
7. Repeat steps 4 through 6 for additional areas on the image, in this case creating a similar rectangle over the image of the kitty, pointing to a similar page about kitties.
<html>
<head><title>Image Map</title></head>
<body>
<img src="80703071.jpg" />
<map name="puppykitteh">
<area shape="rect" coords="380, 157, 34, 478" href="puppies.html" />
<area shape="rect" coords="737, 158, 390, 479" href="kitteh.html" />
</map>
</body>
</html>
8. Add the image map to the image on the page, inside the img tag using the usemap attribute.
<html>
<head><title>Image Map</title></head>
<body>
<img src="80703071.jpg" usemap="#puppykitteh" />
<map name="puppykitteh">
<area shape="rect" coords="380, 157, 34, 478" href="puppies.html" />
<area shape="rect" coords="737, 158, 390, 479" href="kitteh.html" />
</map>
</body>
</html>
Now your areas on the image have been added as usable, clickable areas, leading to other pages within your site. Though not the most practical application, the example gives an idea of how this concept could be put to use in menus and other forms of navigation, as well as literal maps of areas with clickable regions.
To see this code in action, click here.
To see a more useful version of an image map, click here (created from this more advanced css image map guide).
To see a more useful version of an image map, click here (created from this more advanced css image map guide).
No comments:
Post a Comment