首页 > 解决方案 > 图像映射的 HTML 替代文本

问题描述

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

有没有办法为每个图像映射区域创建备份文本链接,图像本身不应该加载吗?

<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"/>

标签: htmlimageimagemapalt

解决方案


如果一个area元素有一个href属性,它必须有一个alt属性:

它指定超链接的文本。它的值必须是通知用户链接目的地的文本。

所以img-alt描述了图像,area-alt描述了链接页面的内容。您可以在规范中找到一个示例:

<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>

推荐阅读