三角形图像映射和悬停效果

Question

我正在尝试用我拥有的两个三角形创建一个非常简单的悬停效果。其中一个三角形将从其下方开始，然后悬停时显示在另一个三角形上方。

问题并不是真正的效果，而是区域框妨碍了。这意味着左侧三角形（其 z 索引暂时位于另一个三角形之上）不必要地重叠，因为它的周长是正方形并且有大量浪费的空间。

因此，将鼠标悬停在三角形 2 上仅适用于有限的区域。我尝试制作图像图并利用坐标图来完成我需要的操作，但我不知道如何在使用它来完成我需要做的事情时将其保持为三角形格式。它只是去一个广场。

有办法做到这一点吗？它基本上只是悬停在特定形状上，但 CSS/HTML 似乎仅限于正方形。任何 jQuery 解决方案或..？

谢谢。

Answer 1

在 100% 不知道你要做什么的情况下，我将建议一种通用方法，用于克服我在过去的项目中遇到的有点类似的问题。

最简单的方法是将所有图像放置在同一个暂存容器中，例如带有 position:relative 的 div，用于为图像提供堆叠和定位上下文。最后，用透明的 1x1 GIF 或 PNG 图像覆盖整个 div，该图像作为宽度/高度为 100% 的标记中的最后一个子级放置，并将图像映射应用到该空白图像。创建三角形所需的区域类型是“多边形”区域。这允许您指定自由形式的点对点图像地图区域。然后，您可以将鼠标悬停/鼠标悬停 JavaScript 链接到该图像映射区域。

例如（CSS 定位和地图坐标只是一个示例，当然，您必须自己指定它们）：

HTML

<div class="imagePanel">
    <img src="http://www.mysite.com/images/triangle1.png" alt="" class="triangle1" />
    <img src="http://www.mysite.com/images/triangle2.png" alt="" class="triangle2" />
    <img src="http://www.mysite.com/images/blank.gif" alt="" class="imageMap" usemap="#mapOver"/>
    <map id="mapOver" name="mapOver">
        <area id="areaTriangle" shape="poly" coords="25,240,108,100,190,240" href="#" />
    </map>
</div>

CSS

div.imagePanel
{
    position: relative;
    width: 300px;
    height: 300px;
}

div.imagePanel > img
{
    position: absolute;
}

img.triangle1
{
    left: 25px;
    top: 100px;
}

img.triangle2
{
    left: 75px;
    top: 75px;
    display: none;
}

img.imageMap
{
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

jQuery< /strong>

$(function() {
    $("#areaTriangle").hover(function() {
        $("img.triangle2").show();
    }, function() {
        $("img.triangle2").hide();
    });
});

查看工作示例在此小提琴。

Answer 2

ImageMapster，我的 jquery 图像地图插件 可能会让您使用图像地图轻松地完成此操作。从描述中尚不完全清楚您要做什么，但该插件允许您使用第二张图像来实现突出显示效果，并且还允许您定义事件后要显示的悬停区域以外的区域。

此示例可能与您想要实现的目标类似（将鼠标悬停在中间圆圈）。您可以让矩形（==您的第二个三角形）在鼠标悬停之前不可见。