Question

我必须创建这种奇怪的蜂窝式导航，理想情况是当一个用途悬停在每个'蜂窝'时，它会改变颜色。也许是透明的橙色覆盖物或其他东西。

我做了一个有点工作的JS小提琴，但不知道如何突出悬停时的形状。我没有看过长时间使用的图像地图，但这是我所知道的唯一解决方案。还有其他更现代的解决方案吗？

注意：这仅适用于宽屏幕。我不知道如何在较小的显示器中处理这个问题，但我想这将是我未来的担心。

除了使用图像映射之外，还有更好的方法吗？

<map id="honeycomb" name="honeycomb">
    <area shape="poly" alt="" title="" coords="493,23,572,65,573,159,491,204,415,158,415,67" href="" target="" />
    <area shape="poly" alt="" title="" coords="651,22,732,66,732,158,652,203,574,158,573,66" href="" target="" />
    ...
</map>

Answer 1

可能与您的图像和纯CSS，以及一些注意事项

如果你利用现有的背景图片并做一些半透明颜色的叠加，那么你可以让它像......一样工作......

<强> THIS FIDDLE SHOWS

哪个用...

<强> HTML

<div class="home-banner home-banner-matrix">
    <div class="matrix-links">
        <a href="#">One</a>
        <a href="#">Two</a>
        <a href="#">Three</a>
        <a href="#">Four</a>
        <a href="#">Five</a>
        <a href="#">Six</a>
        <a href="#">Seven</a>
        <a href="#">Eight</a>
        <a href="#">Nine</a>
    </div>
</div>

<强> CSS

.home-banner {
    position: relative;
    color: #fff;
    text-align: center;
}

.home-banner-matrix {
    position: relative;
    height: 372px;
    background: #000 url(https://dl.dropboxusercontent.com/u/104402909/home-img-matrix.jpg) no-repeat 50% 50%;
}
.matrix-links {
    width: 805px;
    margin: 0 auto;
    padding: 67px 0 0 30px;
}

.matrix-links > a {
    position: relative;
    display: block;
    width: 158px;
    height: 92px;
    z-index: 0;
    float: left;
    margin: 0 0 45px 1px;
    text-decoration: none;
    color: #fff;
    line-height: 92px;
    font-size: 14px;
}

.matrix-links > a:nth-of-type(6) {
    margin-left: 81px;
}

.matrix-links > a:hover {
    text-decoration: none;
    background: rgba(255,255,0,.1);
    color: #C7612C;
}

.matrix-links > a:hover:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-width: 44px 79px 0;
    border-color: rgba(255,255,0,.1) transparent transparent transparent;
    border-style: solid;
    z-index: -1;
}

.matrix-links > a:hover:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-width: 0 79px 44px;
    border-color: transparent transparent rgba(255,255,0,.1) transparent;
    border-style: solid;
    z-index: -1;
}

主要警告是：

你需要努力确保即使在小屏幕尺寸下，元素也与你的背景图像对齐（我的小提琴例子中没有完全调整过）。
你不能得到一个“完美”的悬停（注意你必须越过以前悬停的十六进制的顶部/底部，然后才能进行下一次）。这是因为伪元素的形状仍为矩形，即使在点处是透明的，因此如果在透明区域上方仍然可以使用悬停。
您可以放置的文字数量有限制。
这显然是CSS3，因此早期的浏览器不支持。

因此，最好继续使用SVG或图像映射解决方案，但作为概念验证，您可以使用纯CSS获得您想要的东西（尽管有限）。

Answer 2

我认为，图像地图与以往一样令人敬畏。要明确的是，他们遇到的问题与他们一直存在的问题完全相同，也就是说，从易用性和辅助技术的角度来看，很容易使用它们创建一个绝对不可接受的网站。

所以，尽可能避免任何这样的事情 - 如果只是为了看起来不错，那么可用性建议就是“不要 - 你的用户不要该死的”。

有了这个巨大的警告 - 用户根本不在乎你的导航在99.9％以上的情况下看起来“酷” - 我们此后将假设你知道这一点并且你有一个有效的用例。

对我来说，我使用了先进的，丰富的图像映射来复制应用程序需求，否则需要闪存或本机移动应用程序开发 - 因为它们比图像映射的辅助技术要少得多，所以使用它是有意义的-lovin'图像地图。

对于丰富，低痛苦的图像映射，我不能更多地推荐一个名为ImageMapster的JQuery插件。它改变了图像映射，内置支持相当复杂的多边形和近乎通用的浏览器支持，并有选择地改进它们以支持图像分层，翻转，分组（选择一个热点来触发其他热点的行为）等。我已将它用于绘图，目录，剧院座位映射等。

它可以很好地跨浏览器工作（非常旧的浏览器并不总是支持某种图形功能，但它通常会无痛地降低），移动设备，并且使用起来非常轻松。它在支持时使用HTML5 Canvas技术，或者自动回退到VML和其他渲染技术，以便为不支持所请求功能的浏览器完成工作。

使用图像映射创建不规则形状的HTML链接？

2 个答案:

可能与您的图像和纯CSS，以及一些注意事项