Web pages often use images for navigation. They’re prettier than plaintext links, and you can add both form and function on your page with one element.
To create an image that triggers a link, you substitute an <img /> element in place of the text you would anchor your link to. This markup links text:
The preceding markup creates a linked image to http://www.w3.org. In the preceding example, the alternative text now reads Visit the W3C Web Site so users who can’t see the image know where the link goes. When a user moves the mouse pointer over the image, the cursor changes from an arrow into a pointing hand (or any icon the browser uses for a link), as in Figure.
Figure : Combine image and anchor elements to create a linked image.
A quick click of the image launches the W3C Web site. It’s as simple as that.
As shown earlier in the chapter, you should set the border of any image you use in a link to 0 to keep the browser from surrounding your image with an ugly blue line. Without the line, however, users need other visual (or alternative text) clues so they know an image is a link. Be sure images that serve as links scream to the user (tastefully of course) “I’m a link!”
Building image maps
When you use an <img /> element with an anchor element to create a linking image, you can attach only one link to that image. To create a larger image that connects links to different regions on the page, you need an image map.
To create an image map, you need two things:
1. Elements and attributes
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 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:
This defines a three-region map called NavMap linked to the
Figure shows how a browser displays this markup.
When the mouse sits over a region in the map, the cursor turns into a pointing hand (just as it changes over any other hyperlink). So take advantage of the alternative text to include useful information about the link.
Figure : Image maps turn different areas of an image into linking regions.
A common use for image maps is to turn maps of places (states, countries, cities, and such) into linkable maps. Webmonkey’s image map tutorial at http://webmonkey.wired.com/webmonkey/96/40/index2a.html provides more details on optimizing image maps and maximizing this (X)HTML feature.
Creating image maps by hand can be a tricky. You use an image editor to identify each point in the map and then create the proper markup for it. Most (X)HTML tools include utilities to help you make image maps. If you take advantage of one of these tools, you can create image maps quickly and with fewer errors.
HTML 4 Related Interview Questions
|XML Interview Questions||HTML 4 Interview Questions|
|HTML Interview Questions||HTML 5 Interview Questions|
|HTML DOM Interview Questions||Java Interview Questions|
|CSS Interview Questions||Java Abstraction Interview Questions|
|Dynamic HTML Interview Questions||XHTML Interview Questions|
Html 4 Tutorial
The Least You Need To Know About Html And The Web
Creating And Viewing A Web Page
Proper Planning Prevents Poor Page Performance
Creating (x)html Document Structure
Text And Lists
Linking To Online Resources
Finding And Using Images
Introducing Cascading Style Sheets
Using Cascading Style Sheets
Getting Creative With Colors And Fonts
Using Tables For Stunning Pages
Scripting Web Pages
Working With Forms
Fun With Client-side Scripts
The About Me Page
The Ebay Auction Page
A Company Site
A Product Catalog
Ten Cool Html Tools
Ten Html Do’s And Don’ts
Ten Ways To Exterminate Web Bugs
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.