我有一张图片需要分成4份,每个部分必须有一个链接。 人们还在使用图像热点吗?
在我看来,使用图像作为链接是蹩脚的;它可能会损害可访问性,并且根据所使用的图像,可能会导致Mystery Meat Navigation,这是蹩脚的。
相反,我会将该图像设为背景图像。
<div id="image-hotspot">
<a href="#small-planets">Small Planets</a>
<a href="#big-planets">Big Planets</a>
<a href="#the-sun">The Sun</a>
</div>
#image-hotspot {
background:url(http://onlyfunnyjokes.com/bestoftheweb/wp-uploads/earth_planets_size_comparison.jpg);
height:650px;
width:385px;
}
#image-hotspot a {
display:block;
text-indent:-10000px; /* you could also change the opacity instead*/
/* as a matter of fact I suggest using the opacity technique */
/* the text-indent has caused me troubles in the iPad browser */
height:216px;
}
您可能需要使用更高级的 CSS 定位来确保这些锚元素
<a>
位于您需要的位置。
这是另一个看起来更相关的例子:
#image-hotspot {
/* backup url */
/* background: url(https://i.stack.imgur.com/ajt0f.jpg); */
background: url(http://upload.wikimedia.org/wikipedia/commons/c/c4/Planets2008.jpg);
height: 720px;
width: 1280px;
position: relative;
top: 0px;
left: 0px;
}
#image-hotspot a#the-sun {
display: block;
text-indent: -10000px;
height: 720px;
width: 200px;
position: absolute;
left: 0px;
top: 0px;
}
#image-hotspot a#mercury {
display: block;
text-indent: -10000px;
height: 25px;
width: 25px;
position: absolute;
left: 225px;
top: 275px;
}
#image-hotspot a#venus {
display: block;
text-indent: -10000px;
height: 75px;
width: 40px;
position: absolute;
left: 265px;
top: 250px;
}
#image-hotspot a#earth {
display: block;
text-indent: -10000px;
height: 75px;
width: 45px;
position: absolute;
left: 325px;
top: 250px;
}
#image-hotspot a#mars {
display: block;
text-indent: -10000px;
height: 75px;
width: 45px;
position: absolute;
left: 383px;
top: 250px;
}
#image-hotspot a#jupiter {
display: block;
text-indent: -10000px;
height: 125px;
width: 135px;
position: absolute;
left: 450px;
top: 225px;
}
#image-hotspot a#saturn {
display: block;
text-indent: -10000px;
height: 125px;
width: 195px;
position: absolute;
left: 610px;
top: 225px;
}
#image-hotspot a#uranus {
display: block;
text-indent: -10000px;
height: 75px;
width: 60px;
position: absolute;
left: 805px;
top: 250px;
}
#image-hotspot a#neptune {
display: block;
text-indent: -10000px;
height: 75px;
width: 60px;
position: absolute;
left: 887px;
top: 250px;
}
<div id="image-hotspot">
<a id="the-sun" href="#the-sun">the sun</a>
<a id="mercury" href="#mercury">mercury</a>
<a id="venus" href="#venus">venus</a>
<a id="earth" href="#earth">earth</a>
<a id="mars" href="#mars">mars</a>
<a id="jupiter" href="#jupiter">jupiter</a>
<a id="saturn" href="#saturn">saturn</a>
<a id="uranus" href="#uranus">uranus</a>
<a id="neptune" href="#neptune">neptune</a>
<!-- <a id="pluto" href="#pluto">pluto</a> -->
</div>
您可以使用图像映射,人们不喜欢它们的主要原因是因为人们经常映射图像的一小部分,而您不知道这是一个链接。如果可以的话,只需将每个图像都包裹起来即可
<a href='link'>img</a>