使用图像映射创建不规则形状的 HTML 链接? [英] Creating irregular shaped HTML links with image maps?

问题描述

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

我做了一个有点工作的 JS Fiddle，但不知道如何在悬停时突出显示形状.我已经很久没有看到使用图像映射了，但这是我所知道的唯一解决方案.还有其他更现代的解决方案吗?

http://jsfiddle.net/dmathisen/v9wZV/

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

除了使用图像映射之外，还有其他更好的方法来实现吗?

解决方案

可能适用于您的图像和纯 CSS，但有一些注意事项

如果您利用现有的背景图像并进行一些半透明颜色的叠加，那么您可以像...一样工作

这个小提琴表演

哪个使用这个...

HTML

<div class="matrix-links"><a href="#">一个</a><a href="#">两个</a><a href="#">三</a><a href="#">四个</a><a href="#">五个</a><a href="#">六个</a><a href="#">七</a><a href="#">八</a><a href="#">九</a>

CSS

.home-banner {位置:相对；颜色:#fff;文本对齐:居中；}.home-banner-matrix {位置:相对；高度:372px；背景:#000 url(https://dl.dropboxusercontent.com/u/104402909/home-img-matrix.jpg) 不重复 50% 50%；}.matrix-links {宽度:805px；边距:0 自动；填充:67px 0 0 30px；}.matrix-links >一种 {位置:相对；显示:块；宽度:158px；高度:92px；z-索引:0；向左飘浮;边距:0 0 45px 1px；文字装饰:无；颜色:#fff;行高:92px；字体大小:14px；}.matrix-links >a:nth-of-type(6) {左边距:81px；}.matrix-links >一个:悬停{文字装饰:无；背景:RGBA(255,255,0,.1)；颜色:#C7612C；}.matrix-links >一个:悬停:之前{内容: '';位置:绝对；顶部:100%；左:0；宽度:0；高度:0；边框宽度:44px 79px 0；边框颜色:rgba(255,255,0,.1) 透明透明透明；边框样式:实心；z-索引:-1；}.matrix-links >一个:悬停:{内容: '';位置:绝对；底部:100%；左:0；宽度:0；高度:0；边框宽度:0 79px 44px；边框颜色:透明透明 rgba(255,255,0,.1) 透明；边框样式:实心；z-索引:-1；}

主要注意事项是:

1. 您需要努力确保即使在小屏幕尺寸下，元素也能与您的背景图像对齐(在我的小提琴示例中，我没有完全调整).
2. 您无法获得完美"的悬停(请注意，您必须如何越过先前悬停的六角形的顶部/底部，然后才能进行下一个).这是因为伪元素的形状仍然是矩形，即使在某些点上是透明的，因此如果在该透明区域上方仍然会进行悬停.
3. 您可以放置​​的文本数量有限制.
4. 这显然是 CSS3，因此在早期浏览器中不支持.

因此，最好还是采用 SVG 或图像映射解决方案，但作为概念证明，您可以使用纯 CSS 获得您想要的东西(尽管有限).

I have to create this strange honeycomb style navigation and ideally when a use hovers each 'honeycomb', it'll change color. Maybe a transparent orange overlay or something.

I made a somewhat working JS Fiddle, but don't know how I can highlight the shapes on hover. I haven't seen image maps used in a long time, but that's the only solution I know of. Are there other, more modern solutions?

http://jsfiddle.net/dmathisen/v9wZV/

Note: this only works on a wide screen. I have no idea how I'll handle this in smaller displays, but I guess that's for future me to worry about.

Is there a better way to accomplish this other than using an image map?

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

解决方案

Possible with Your Image and Pure CSS, with Some Caveats

If you utilize your existing background image and do some overlays of semi-transparent colors, then you can get it to work like...

THIS FIDDLE SHOWS

Which uses this...

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

The main caveats are:

1. You need to work to make sure even at small screen sizes, the element line up with your background image (I have not completely adjusted for that in my fiddle example).
2. You cannot get a "perfect" hover (note how you must get past the top/bottom of a previously hovered hex before the next one will engage). This is because the pseudo-elements are still rectangular in shape, even if transparent at points, and thus still engage the hover if over that transparent area.
3. There is a limitation on the amount of text you could put.
4. This is obviously CSS3, so it is not supported in earlier browsers.

So it still may be best to pursue a SVG or image map solution, but as a proof of concept, you can get something of what you desire (though limited) with pure CSS.

这篇关于使用图像映射创建不规则形状的 HTML 链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！