Here we go over how to set up an image map, and some downsides to consider first.
| Prerequisites: | You should already know how to create a basic HTML document and how to add accessible images to a webpage. |
|---|---|
| Objective: | Learn how to make different regions of one image link to different 页面。 |
警告： This article discusses client-side image maps only. Do not use server-side image maps, which require the user to have a mouse.
When you nest an image inside
<a>
, the entire image links to one webpage. An image map, on the other hand, contains several active regions (called "hotspots") that each link to a different resource.
Formerly, image maps were a popular navigation device, but it’s important to thoroughly consider their performance and accessibility ramifications.
Text links (perhaps styled with CSS) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more SEO-friendly, and support accessibility needs (e.g., screen readers, text-only browsers, translation services).
Not just any image is acceptable.
alt
text is mandatory, of course, but many people never see it.
You insert your image
much the same way as always
(with an
<img>
element and
alt
text). If the image is only present as a navigation device, you may write
, provided you furnish appropriate
alt
text in the
<area>
elements later on.
You will need a special
usemap
attribute. Come up with a unique name, containing no spaces, for your image map. Then assign that name (preceded by a hash) as the value for the
usemap
属性：
<img
src="image-map.png"
alt=""
usemap="#example-map-1" />
In this step, put all your code inside a
<map>
元素。
<map>
only needs one attribute, the same map
名称
as you used in your
usemap
attribute above:
<map name="example-map-1">
</map>
Inside the
<map>
element, we need
<area>
elements. An
<area>
element corresponds to a single hotspot. To keep keyboard navigation intuitive, make sure the source order of
<area>
elements corresponds to the visual order of hotspots.
<area>
elements are empty elements, but do require four attributes:
shape
coords
shape
takes one of four values:
circle
,
rect
,
poly
，和
default
. (A
default
<area>
occupies the entire image, minus any other hotspots you’ve defined.) The shape you choose determines the coordinate information you’ll need to provide in
coords
.
Coordinates are given in CSS pixels.
In case of overlap, source order carries the day.
href
The URL of the resource you’re linking to. You may leave this attribute blank if you don’t want the current area to link anywhere (say, if you’re making a hollow circle.)
alt
A mandatory attribute, telling people where the link goes or what it does.
alt
text only displays when the image is unavailable. Please refer to our
guidelines for writing accessible link text.
You may write
若
href
attribute is blank
and
the entire image already has an
alt
属性。
<map name="example-map-1">
<area shape="circle" coords="200,250,25"
href="page-2.html" alt="circle example" />
<area shape="rect" coords="10, 5, 20, 15"
href="page-3.html" alt="rectangle example" />
</map>
You aren’t done until you test image maps rigorously on many browsers and devices. Try following links with your keyboard alone. Try turning images off.
If your image map is wider than about 240px, you’ll need to make further adjustments to make your website responsive. It's not enough to resize the image for small screens, because the coordinates stay the same and no longer match the image.
If you must use image maps, you may want to look into Matt Stow's jQuery plugin. Alternatively, Dudley Storey demonstrates a way to use SVG for an image map effect, along with a subsequent combined SVG-raster hack for bitmap images.
最后修改： , 由 MDN 贡献者