css - 图像映射是最好的解决方案吗？

Question

我有一个由 5 个重叠的矩形组成的图像，所有这些矩形上都有其相关的标题，并且必须链接到其相应的页面。我已经尝试将图像上传到自动生成代码的在线图像映射生成器，但是，我只能更改 CSS 而不能更改 HTML。图像映射是解决我的问题的最佳方案吗？或者有没有我可以使用的不涉及修改 HTML 的替代方法？

这是我的图片:

HTML:

<div style="text-align:center; width:406px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201310160406077" src="http://www.image-maps.com/uploaded_files/3201310160406077_home_image.png" usemap="#Image-Maps_3201310160406077" border="0" width="406" height="406" alt="" />
<map id="_Image-Maps_3201310160406077" name="Image-Maps_3201310160406077">
<area shape="rect" coords="72,3,192,43" href="#" alt="" title=""    />
<area shape="rect" coords="326,75,401,115" href="#" alt="" title=""    />
<area shape="rect" coords="4,290,118,330" href="#" alt="" title=""    />
<area shape="rect" coords="241,361,332,401" href="#" alt="" title=""    />
<area shape="rect" coords="158,180,249,220" href="#" alt="" title=""    />
<area shape="rect" coords="404,404,406,406" href="http://www.image-maps.com/index.php?aff=mapped_users_3201310160406077" alt="Image Map" title="Image Map" />

CSS:

dl.image_map {display:block; width:406px; height:406px; background:url(http://www.image-maps.com/uploaded_files/3201310160406077_home_image.png); position:relative; margin:2px auto 2px auto;}
a.LINK0 {left:72px; top:3px; background:transparent;}
a.LINK0 {display:block; width:122px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK0:hover  {background:transparent; border:1px dashed black; color:black;}
a.LINK1 {left:326px; top:75px; background:transparent;}
a.LINK1 {display:block; width:77px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK1:hover  {background:transparent; border:1px dashed black; color:black;}
a.LINK2 {left:4px; top:290px; background:transparent;}
a.LINK2 {display:block; width:116px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK2:hover  {background:transparent; border:1px dashed black; color:black;}
a.LINK3 {left:241px; top:361px; background:transparent;}
a.LINK3 {display:block; width:93px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK3:hover  {background:transparent; border:1px dashed black; color:black;}
a.LINK4 {left:158px; top:180px; background:transparent;}
a.LINK4 {display:block; width:93px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK4:hover  {background:transparent; border:1px dashed black; color:black;}

Answer 1

如果你愿意，你可以使用完整的 HTML/CSS 来做到这一点，使用 position: absolute , z-index和 display: table-cell;

nav {
    position: relative;
    font-family: Arial;
    font-size: 14px;
    margin: 20px;
}
nav a {
    position: absolute;
    top: 0; left: 0;
    padding: 10px;
    border-radius: 5px;
    color: #222;
    background: #333;
    text-decoration: none;
    text-transform: uppercase;
}
nav a:hover {
    text-decoration: underline;
}
nav a span {
    display: table-cell;
    width: 145px; height: 145px;
}
.link-home {
    top: 115px; left: 115px;
    color: white;
    line-height: 145px;
    font-size: 24px;
    background: #C1272C;
    box-shadow: 0 0 10px 0 #333;
    z-index: 5;
}
.link-printed-digital-media {
    top: 0; left: 65px;
    background: rgba(50, 50, 50, .8);
    z-index: 4;
}
.link-file-sharing {
    top: 70px; left: 185px;
    background: rgba(50, 50, 50, .6);
    z-index: 3;
}
.link-external-links {
    top: 185px; left: 165px;
    background: rgba(50, 50, 50, .4);
    z-index: 2;
}
.link-stock-management {
    top: 165px; left: 0;
    background: rgba(50, 50, 50, .2);
    z-index: 1;
}
/* size */
.link-printed-digital-media span,
.link-external-links span {
    height: 200px;
}
.link-file-sharing span,
.link-stock-management span {
    width: 200px;
}
/* align */
.link-home span {
    text-align: center;
}
.link-file-sharing span,
.link-external-links span {
    text-align: right;
}
.link-external-links span,
.link-stock-management span {
    vertical-align: bottom;
}

<nav>
    <a href="#" class="link-home">
        <span>Home</span>
    </a>
    <a href="#" class="link-printed-digital-media">
        <span>Printed &amp;<br>Digital Media</span>
    </a>
    <a href="#" class="link-file-sharing">
        <span>File<br>Sharing</span>
    </a>
    <a href="#" class="link-external-links">
        <span>External<br>Links</span>
    </a>
    <a href="#" class="link-stock-management">
        <span>Stock<br>Management</span>
    </a>
</nav>

请备注<span>是必需的，因为您不能合并 table-cell和同一元素上的绝对定位。