图片地图的HTML替代文字

时间:2018-11-26 20:01:14

标签: html image imagemap alt

因此,在图像本身无法加载的情况下,可以为其提供替代文本,但是图像映射呢?

是否可以为每个图像映射区域创建备份文本链接,图像本身是否应该不加载?

<map id="knightmap" name="knightmap">
 <!--Hilt--><area shape="circle" coords="201,361 11" 
href="http://uncyclopedia.wikia.com/wiki/HowTo:End_Him_Rightly"/>
 <!--Banner--><area shape="rect" coords="278,309 351,636" 
href="http://www.medievalchronicles.com/medieval-knights/knights-coat-of- 
arms/"/>
 <!--Sword--><area shape="poly" coords="195,335 157,346 112,303 149,271 
95,10 125,5 172,150 200,261 220,324 " 
href="https://en.wikipedia.org/wiki/Knightly_sword"/>
 <!--Shield--><area shape="poly" coords="346,231 415,210 485,212 480,367 
441,482 418,487" href="https://en.wikipedia.org/wiki/Kite_shield"/>
 <!--Helm--><area shape="poly" coords="300,300 204,250 197,231 200,225 
190,180 204,136 245,83 323,135 334,182 353,192 353,209 " 
href="https://en.wikipedia.org/wiki/Close_helmet"/>
 <!--Boot left--><area shape="poly" coords="203,597 226,604 228,614 195,627 
145,630 143,620" href="https://en.wikipedia.org/wiki/Sabaton"/>
 <!--Boot right--><area shape="poly" coords="434,700 450,687 491,704 488,719 
433,719 " href="https://en.wikipedia.org/wiki/Sabaton"/>
</map>

<img src="images/lab9/knight.png" usemap="knightmap" class="center" 
alt="Knight"/>

1 个答案:

答案 0 :(得分:0)

如果area element具有href属性,则它必须具有alt属性:

  

它指定超链接的文本。其值必须为文本,该文本告知用户链接的目的地。

因此img-alt描述了图像,area-alt描述了链接页面的内容。您可以在规范中找到an example

<p>View houses for sale in North Katoomba or South Katoomba:</p>
<p><img src="imagemap.png" width="209" alt="Map of Katoomba" height="249" usemap="#Map">

<map name="Map">
  <area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130" href="north.html" alt="Houses in North Katoomba">
  <area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61" alt="Houses in South Katoomba" href="south.html">
</map>