Skip to content

Commit

Permalink
convert to markdown for learn/html
Browse files Browse the repository at this point in the history
  • Loading branch information
@yin1999
yin1999 committed Jul 26, 2022
1 parent b771d2e commit c40a619
Show file tree
Hide file tree
Showing 22 changed files with 3,453 additions and 3,695 deletions.
149 changes: 75 additions & 74 deletions files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,114 +3,115 @@ title: Add a hit map on top of an image
slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
---
<div>
<p>现在我们将学习如何设置图像映射，先讨论他的缺点。</p>
</div>
现在我们将学习如何设置图像映射，先讨论他的缺点。

<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">前提：</th>
<td>你应该已经知道如何<a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">create a basic HTML document</a> 以及<a href="/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">add accessible images to a webpage.</a></td>
</tr>
<tr>
<th scope="row">目标：</th>
<td>学习如何将一张图片的不同区域链接到不同页面。</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row">前提：</th>
<td>
你应该已经知道如何<a
href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML"
>create a basic HTML document</a
>
以及<a href="/en-US/Learn/HTML/Howto/Add_images_to_a_webpage"
>add accessible images to a webpage.</a
>
</td>
</tr>
<tr>
<th scope="row">目标：</th>
<td>学习如何将一张图片的不同区域链接到不同页面。</td>
</tr>
</tbody>
</table>

<div class="warning">
<p><strong>警告：</strong> 本文仅讨论客户端图像映射。不要使用服务器端图像映射，这需要用户拥有鼠标。</p>
</div>
> **警告：** 本文仅讨论客户端图像映射。不要使用服务器端图像映射，这需要用户拥有鼠标。
<h2 id="图像映射和它的缺点">图像映射和它的缺点</h2>
## 图像映射和它的缺点

<p>当你在{{htmlelement('a')}}标签中嵌套图像， 整个图像是链接到一个网页的。但在图像映射中，包含多个活动区域（称为“热点”），可以链接到不同的资源地址。</p>
当你在{{htmlelement('a')}}标签中嵌套图像， 整个图像是链接到一个网页的。但在图像映射中，包含多个活动区域（称为“热点”），可以链接到不同的资源地址。

<p>图像映射原本非常流行于导航策略，但是前提需要考虑它的性能和可访问性。</p>
图像映射原本非常流行于导航策略，但是前提需要考虑它的性能和可访问性。

<p><a href="/en-US/Learn/HTML/Howto/Create_a_hyperlink">Text links</a> (perhaps styled with CSS) 比图像映射更具优势：文本链接更轻量级、好维护、更易于 SEO，而且支持更多形式需求的访问（如，屏幕阅读器、纯文本浏览器、翻译服务等）。</p>
[Text links](/en-US/Learn/HTML/Howto/Create_a_hyperlink) (perhaps styled with CSS) 比图像映射更具优势：文本链接更轻量级、好维护、更易于 SEO，而且支持更多形式需求的访问（如，屏幕阅读器、纯文本浏览器、翻译服务等）。

<h2 id="如何正确的插入一张图像映射">如何正确的插入一张图像映射</h2>
## 如何正确的插入一张图像映射

<h3 id="步骤1_图片">步骤 1: 图片</h3>
### 步骤 1: 图片

<p>不是所有图片都合适。</p>
不是所有图片都合适。

<ul>
<li>图片必须明确表明当用户跟随图片链接时会发生什么。 <code>alt</code> 属性是必须的， 但很多人注意不到。</li>
<li>图片必须明确指出热点的开始和结束位置。</li>
<li>在任何尺寸的视口下，热点都需要足够大，方便用户可以点击。多大足够呢？<a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">72 × 72 CSS pixels 是一个推荐的最小尺寸，</a> 包括触摸目标之间额外的间隙。在 <a href="http://www.goethe-verlag.com/book2/">50languages.com</a> (as of time of writing) 上的世界地图可以完美诠释这一点。 用户点击 Russia 或 North America 要比 Albania 或 Estonia 容易得多。</li>
</ul>
- 图片必须明确表明当用户跟随图片链接时会发生什么。 `alt` 属性是必须的， 但很多人注意不到。
- 图片必须明确指出热点的开始和结束位置。
- 在任何尺寸的视口下，热点都需要足够大，方便用户可以点击。多大足够呢？[72 × 72 CSS pixels 是一个推荐的最小尺寸，](http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/) 包括触摸目标之间额外的间隙。在 [50languages.com](http://www.goethe-verlag.com/book2/) (as of time of writing) 上的世界地图可以完美诠释这一点。 用户点击 Russia 或 North America 要比 Albania 或 Estonia 容易得多。

<p>插入图片的方式 <a href="/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">和通常一样</a> (用 {{htmlelement("img")}} 标签 和 {{htmlattrxref("alt",'img')}} 文本). 如果图片只是用作导航容器， 你可以设置图片的 <code>alt=""， 改在后面</code>{{htmlelement('area')}} 的{{htmlattrxref("alt",'area')}} 中提供合适的文本。</p>
插入图片的方式 [和通常一样](/en-US/Learn/HTML/Howto/Add_images_to_a_webpage) (用 {{htmlelement("img")}} 标签 和 {{htmlattrxref("alt",'img')}} 文本). 如果图片只是用作导航容器， 你可以设置图片的 `alt=""， 改在后面`{{htmlelement('area')}} 的{{htmlattrxref("alt",'area')}} 中提供合适的文本。

<p>你将需要一个特殊的 {{htmlattrxref("usemap","img")}} 属性。 为图像映射提供一个唯一标识，这个标识不能包含空格。将这个标识 (preceded by a hash) 作为 <code>usemap</code> 属性的值：</p>
你将需要一个特殊的 {{htmlattrxref("usemap","img")}} 属性。 为图像映射提供一个唯一标识，这个标识不能包含空格。将这个标识 (preceded by a hash) 作为 `usemap` 属性的值：

<pre class="brush: html">&lt;img
```html
<img
src="image-map.png"
alt=""
usemap="#example-map-1" /&gt;</pre>
usemap="#example-map-1" />
```

<h3 id="步骤2_激活你的热点">步骤 2: 激活你的热点</h3>
### 步骤 2: 激活你的热点

<p>在这一步中， 将所有代码放置 {{htmlelement('map')}} 标签中。<code>&lt;map&gt;</code> 只需要一个属性， 设置{{htmlattrxref("name","map")}} 和上面<code>usemap属性一样的map值：</code></p>
在这一步中， 将所有代码放置 {{htmlelement('map')}} 标签中。`<map>` 只需要一个属性， 设置{{htmlattrxref("name","map")}} 和上面`usemap属性一样的map值：`

<pre class="brush: html">&lt;map name="example-map-1"&gt;
```html
<map name="example-map-1">

&lt;/map&gt;</pre>
</map>
```

<p><code>在&lt;map&gt;</code> 元素中，我们需要嵌套 {{htmlelement('area')}} 元素。一个 <code>&lt;area&gt;</code> 元素对应一个热点.。为保持键盘导航的直观， 请确保<code>&lt;area&gt;</code> 的源顺序和视觉上的热点顺序一致。</p>
`在<map>` 元素中，我们需要嵌套 {{htmlelement('area')}} 元素。一个 `<area>` 元素对应一个热点.。为保持键盘导航的直观， 请确保`<area>` 的源顺序和视觉上的热点顺序一致。

<p><code>&lt;area&gt;</code> 元素是空元素， 但是需要包含 4 个属性：</p>
`<area>` 元素是空元素， 但是需要包含 4 个属性：

<dl>
<dt>{{htmlattrxref('shape','area')}} {{htmlattrxref('coords','area')}}</dt>
<dd>
<p><code>shape</code> 有 4 个值：<code>circle</code>, <code>rect</code>, <code>poly</code>, and <code>default</code>. ( <code>default</code> <code>&lt;area&gt;</code> 表示除去您定义的其他热点的剩余空间.) 根据你选择的形状需要在 <code>coords</code> 中提供对应的坐标信息。</p>
- {{htmlattrxref('shape','area')}} {{htmlattrxref('coords','area')}}

<ul>
<li>对于 circle, 提供中心的 x、y 坐标，还需要提供半径。</li>
<li>对于 rectangle, 提供左上角和右下角的 x、y 坐标。</li>
<li>对于 polygon, 提供每个角的 x、y 坐标（至少 6 个值）。</li>
</ul>
- : `shape` 有 4 个值：`circle`, `rect`, `poly`, and `default`. ( `default` `<area>` 表示除去您定义的其他热点的剩余空间.) 根据你选择的形状需要在 `coords` 中提供对应的坐标信息。

<p>坐标用 CSS 像素 px 表示。</p>
- 对于 circle, 提供中心的 x、y 坐标，还需要提供半径。
- 对于 rectangle, 提供左上角和右下角的 x、y 坐标。
- 对于 polygon, 提供每个角的 x、y 坐标（至少 6 个值）。

<p>In case of overlap, source order carries the day.</p>
</dd>
<dt>{{htmlattrxref('href','area')}}</dt>
<dd>您需要链接的资源地址。 如果您不希望当前区域链接到任何地方 (比方说，如果您正在创建一个空心圆)，您可以将这个属性保留为空。</dd>
<dt>{{htmlattrxref('alt','area')}}</dt>
<dd>一个必选属性，告诉用户链接的指向或功能说明。<code>alt</code> 文本仅在图像不可用时显示。请参阅我们的<a href="/en-US/Learn/HTML/Howto/Create_a_hyperlink#Writing_accessible_link_text">guidelines for writing accessible link text</a>。如果 <code>href</code> 属性为空并且整个图像已经具备了 <code>alt</code> 属性，则可以设置 <code>alt=""</code>。
</dd>
</dl>
坐标用 CSS 像素 px 表示。

<pre class="brush: html">&lt;map name="example-map-1"&gt;
&lt;area shape="circle" coords="200,250,25"
href="page-2.html" alt="circle example" /&gt;
In case of overlap, source order carries the day.

- {{htmlattrxref('href','area')}}
- : 您需要链接的资源地址。 如果您不希望当前区域链接到任何地方 (比方说，如果您正在创建一个空心圆)，您可以将这个属性保留为空。
- {{htmlattrxref('alt','area')}}
- : 一个必选属性，告诉用户链接的指向或功能说明。`alt` 文本仅在图像不可用时显示。请参阅我们的[guidelines for writing accessible link text](/en-US/Learn/HTML/Howto/Create_a_hyperlink#Writing_accessible_link_text)。如果 `href` 属性为空并且整个图像已经具备了 `alt` 属性，则可以设置 `alt=""`。

&lt;area shape="rect" coords="10, 5, 20, 15"
href="page-3.html" alt="rectangle example" /&gt;
```html
<map name="example-map-1">
<area shape="circle" coords="200,250,25"
href="page-2.html" alt="circle example" />

&lt;/map&gt;</pre>

<h3 id="步骤3_确保它的可用范围">步骤 3: 确保它的可用范围</h3>
<area shape="rect" coords="10, 5, 20, 15"
href="page-3.html" alt="rectangle example" />

<p>你还并没有完成除非你很严格的在多个浏览器和终端测试图像映射功能。尝试仅用键盘操作。尝试关掉图片。</p>
</map>
```

<p>如果你的图像映射宽度大于 240px，你将需要进一步调整来适应网站的响应式。仅调整小屏幕下的图片是不够的，因为不变的坐标无法适应这样的图像。</p>
### 步骤 3: 确保它的可用范围

<p>如果必须使用图像映射， 您可以看看<a href="https://github.com/stowball/jQuery-rwdImageMaps">Matt Stow's jQuery plugin.</a>。另外，Dudley Storey 示范了一种方法 <a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">use SVG for an image map effect</a>，以及后来的<a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">ombined SVG-raster hack</a> for bitmap images.</p>
你还并没有完成除非你很严格的在多个浏览器和终端测试图像映射功能。尝试仅用键盘操作。尝试关掉图片。

<h2 id="Learn_more">Learn more</h2>
如果你的图像映射宽度大于 240px，你将需要进一步调整来适应网站的响应式。仅调整小屏幕下的图片是不够的，因为不变的坐标无法适应这样的图像。

<ul>
<li>{{htmlelement("img")}}</li>
<li>{{htmlelement("map")}}</li>
<li>{{htmlelement("area")}}</li>
<li><a href="http://www.maschek.hu/imagemap/imgmap">Online image map editor</a></li>
<li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Advice on handling email clients</a></li>
</ul>
如果必须使用图像映射， 您可以看看[Matt Stow's jQuery plugin.](https://github.com/stowball/jQuery-rwdImageMaps)。另外，Dudley Storey 示范了一种方法 [use SVG for an image map effect](http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps)，以及后来的[ombined SVG-raster hack](http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG) for bitmap images.

## Learn more

- {{htmlelement("img")}}
- {{htmlelement("map")}}
- {{htmlelement("area")}}
- [Online image map editor](http://www.maschek.hu/imagemap/imgmap)
- [Advice on handling email clients](http://blog.goolara.com/2014/06/05/image-maps-revisited/)
Loading

0 comments on commit c40a619

Please sign in to comment.