Creating an image map - Wiley Publishing For Dummies HTML for Dummies, pdf

When you use an <img> element with an anchor element to create a linking image, you can only attach one link to that image. If you want to create a larger image that connects several different links to different regions on the page, you need an image map.

To create an image map you need two things:

An image with several distinct areas that would be obvious to users that point to different areas on your site.

A set of markup to map the different regions on the map to different URLs.

You use the <img> element to add the map image into your page, just as you would any other image. In addition, you include the usemap attribute to let the browser know that there's image map information to go

HTML 4 for Dummies, 4th Edition

Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- by-step book will put you on the right track.

Table of Contents

HTML 4 For Dummies, 4th Edition Introduction

Part I - Meeting HTML in Its Natural Environment

Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web

Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML

Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images

Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level

Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms

Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS

Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic

Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site

Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens

Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts

Part VII - Appendixes Appendix A - HTML 4 Tags

Appendix B - HTML Character Codes Appendix C - Glossary

Index

Cheat Sheet- HTML 4 For Dummies, 4th Edition List of Figures

List of Tables List of Listings List of Sidebars

with the image. The value of the usemap attribute is the name of your map.

You use two elements and a collection of attributes to define the image map: <map> to hold the map information and <area> to link specific parts of the map to URLs. The <map> element uses the name

attribute to identify the map. The value of name should match the value of usemap in the <img> element that goes with the map. The <area> element takes several attributes to define the specifics for each region in the map:

shape: Specifies the shape of the region. You can choose from rect (rectangle), circle, and poly (a triangle or polygon).

coords: Define the region's coordinates. A rectangle's coordinates include the left, right, top, and bottom points. A circle's coordinates include the x and y coordinates for the center of the circle and the circle's radius. A polygon's coordinates are a collection of x and y coordinates for every point in the polygon.

href: Specifies the URL to which the region links. This can be an absolute or relative URL.

alt: Provides alternative text for the image region.

This markup defines a three-region map called NavMap linked to the navigation.gif image:

Figure 6-12 shows how a browser displays this markup.

Figure 6-12: Image maps turn different areas of an image into linking regions.

Tip When the mouse sits over a region in the map, the cursor turns into a pointing hand, just as it does over any other hyperlink, so take advantage of the alternative text to include useful information about the link

Creating thumbnail images

There may be times when you want to make large images available to users on your Web site, but want to give them a preview of the image and the option to view the larger image, rather than forcing them to wait for the larger image when they first view your page. Thumbnail images use smaller versions of a large image to link to the larger (both in file size and image size) image, as in this markup:

<p><a href="brass_large.jpg"> <img src="brass_small.jpg"

alt="trumpet thumbnail" height="98" width="109" border="0">

</a> </p>