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在同一元素上组合和绝对定位。

Answer 2

如果您使用 z-index（在 CSS 中）在正确的位置以正确的大小堆叠 html 元素，并向其中添加带有图像的超链接，它应该可以正常工作吗？

看看这个例子，看看它是如何工作的。

<html>
<head>
<style>
/* setup container */
.nav-wrapper
{
    position:relative;
    width:500px;
    height:500px;
    background:#f0f0f0;
}

/* on each item */
a.nav-item
{
    position:absolute;
    width:200px;
    height:200px;
}

/* per specific item, note the position and the z-index */
.home {
    left: 120;
    top: 135;
    z-index:5; /*on top*/
    background:rgba(250,50,50,.9);
}
.print {
    left:80;
    top: 30;
    z-index:1; /*on bottom*/
    background:rgba(60,60,60,.5);
}
.fileshare {
    left: 40;
    top: 180;
    z-index:2;
    background:rgba(50,50,50,.5);
}
.stock {
    left: 235;
    top: 220;
    z-index:3;
    background:rgba(70,70,70,.5);
}
.links {
    left: 240;
    top: 50;
    z-index:4;
    background:rgba(80,80,80,.5);
}

/* for example only */
.nav-item img
{
    width:200px;
    height:200px;
}
</style>
</head>
<body>
    <div class="link-wrapper">
        <!-- items over here. note the classes -->
        <a href="print.html" class="nav-item print">
            <img src="print.png" alt="print" />
        </a>
        <a href="fileshare.html" class="nav-item fileshare">
            <img src="fileshare.png" alt="fileshare" />
        </a>
        <a href="home.html" class="nav-item home">
            <img src="home.png" alt="home"/>
        </a>
        <a href="stock.html" class="nav-item stock">
            <img src="stock.png" alt="stock" />
        </a>
        <a href="links.html" class="nav-item links">
            <img src="links.png" alt="links" />
        </a>
    </div>
</body>
</html>