2

编辑：感谢很多关于如何解决这些问题的好例子。我还不能决定接受谁，但我会浏览所有例子，看看我最喜欢哪个。伟大的反馈家伙！=D

我通常在 flash 中做这些事情，但这次它必须与 mac、iPad 和所有这些设备兼容。

那么，我需要什么帮助？

我有一张照片，上面有一些“热点”。我希望能够单击任何这些热点以显示一些信息。

这应该是相当基本且容易实现的，但是因为在我不得不问你们之前我从来没有在 html 中这样做过 =)

那么，最好的方法是什么？它必须与任何浏览器和设备兼容，并且不需要非常先进。如果可以为盒子添加效果（滑出、淡入或类似的东西），那么这是一个不错的奖励，但不是我需要的。

任何帮助都会很棒！

分解：

我有一个带有一些“热点”的背景图像（在我的示例中为数字 1 和 2）。用户应该能够将鼠标悬停在其中任何一个上或单击它以获取更多信息，如图 #2 所示

http://i50.tinypic.com/so5nw1.jpg

当您悬停/单击任何这些热点时，就会发生这种情况。文本和图像显示在一个漂亮的小信息框中。

http://i49.tinypic.com/1449o28.jpg

如果用户单击“更多信息”，它将进一步打开以显示更多信息（如果可用）。就像在这个img中一样：

http://i50.tinypic.com/2502fzq.jpg

4

4 回答 4

2

这是另一种方法，在我看来远远优于使用地图或过多的 JS。将<div>元素放在带有背景图像的元素顶部，让 HTML 和 CSS 为您完成繁重的工作。

我的例子的图像

在 JSFiddle 上查看

HTML

HTML 应该看起来很漂亮，可以理解，我们<div>用类创建 shotspot并依赖于某些存在的东西。即.text（显示数字）、.hover-popup（悬停时显示）和.click-popup（在内部.hover-popup并在单击时显示）。

<div id="hotspot1" class="hotspot">
    <div class="text">1</div>
    <div class="hover-popup">
        I was hovered!
        <div class="click-popup">
            I was clicked on!
        </div>
    </div>
</div>

<div id="hotspot2" class="hotspot">
    <div class="text">2</div>
    <div class="hover-popup">
        I was hovered!
        <div class="click-popup">
            I was clicked on!
        </div>
    </div>
</div>

CSS

这是大多数魔法发生的地方，请参阅评论以获得进一步的解释。

/* These two position each hotspot */
#hotspot1 {
    left:15%; /* we could use px or position right or bottom also */
    top:20%;
}

#hotspot2 {
    left:35%;
    top:25%;
}

/* General styles on the hotspot */
.hotspot {
    border-radius:50%;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-color:#CCC;
    position:absolute;
}

.hotspot .text {
    width:40px;
    height:40px;
}

/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
    cursor:pointer;
}

/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
    display:none;
    z-index:1;
}

/* show when clicked */
.hotspot.clicked .click-popup {
    display:block;
}

/* show and position when clicked */
.hotspot:hover .hover-popup {
    display:block;
    position:absolute;
    left:100%;
    top:0;
    width:300px;
    background-color:#BBB;
    border:1px solid #000;
}

JavaScript（使用 jQuery）

不幸的是，您将不得不为点击部分使用一些 JavaScript，因为 CSS 没有“点击”状态（在带有复选框的黑客之外）。我正在使用 jQuery，因为它很容易做我想做的事。

$(document).ready(function () {
    $('.hotspot').click(function () {
        $(this).toggleClass('clicked');
    });
});

创建箭头

在css-tricks:before上，您可以找到使用和/或:after伪元素将箭头附加到元素的教程。您甚至可以通过将:after元素放在:before. 但是，是的，有很多关于如何做到这一点的资源。

于 2013-03-01T12:07:26.190 回答
2

我不认为这里真的需要 Javascript 方法。我在JSBin上为你创建了一个纯 CSS 的小模型。

基本上重点是你把图片放在一个相对定位div的地方，然后绝对定位里面的热点相同div。在热点divs 中，您将拥有更多信息元素，仅显示:hover其父项。

这使它变得简单，并且更易于访问。

更新：从两侧平均裁剪图像

如果您想保持图像居中并且仍然不使用任何 javascript，您可以将所需的图像设置为background-image容器的 a，并将其background-position参数设置为center center.

您必须确保将其width设置div为图像的宽度，并将其设置max-width为 100%，以便当窗口的大小调整到低于图像宽度时，它会保持在中心。

现在，我在这里遇到的一个问题是如何使热点相对于图像保持居中。我是这样解决的：

div我为具有这些特征的热点创建了一个包装器：

margin:   0 auto;
position: relative;
width:    0px;

这基本上可以确保包装器div找到我们图像的中心。然后，您将相对于图像的顶部中心位置定位热点，而不是将左上角作为起点。

然后你就有了你正在寻找的东西。

工作演示

于 2013-03-01T12:14:31.543 回答
0

您应该能够在地图区域中使用 onclick 或 OnMouseOver 事件（将 href 定义为“”）。

使用 OnMouseOver 的示例在这里：http ://www.omegagrafix.com/mouseover/mousimap.html

于 2013-03-01T11:58:25.973 回答
0

在 html 中为该图像提供一个类（例如：imgclass）。在 javascript（使用 jquery）中，以 html 格式构建悬停框并将其绑定到该图像的“鼠标悬停”事件。

例如：

 function bindhtmltoimage() {
    myimg = $('body').find('.imgclass');
    divSlot.each(function (index) {
        $(this).bind('mouseover', function () {
            try {
                //position the hover box on image. you can customize the y and x axis to place it left or right.
                var x = $(this).offset().left;
                var y = $(this).offset().top;
                var position = $(window).height() - ($("#divHover").height() + y);
                var widthposition = $(window).width() - ($("#divHover").width() + x);
                if (position < 0 || widthposition < 0) {
                    if (position < 0) {
                        $("#divHover").css({
                            position: 'absolute',
                            left: x + 20,
                            top: y - $("#divHover").height() - 20
                        });
                    }
                    if (widthposition < 0) {
                        $("#divHover").css({
                            position: 'absolute',
                            left: x - $("#divHover").width(),
                            top: y + 20
                        });
                    }
                }

                //build your html string for that hover box and apply to it.
                $('#divHover').html("your Html content for that box goes here");
                $('#divHover').show();

                //if you want the box dynamically generated. create the html content and append to the dom.
            }
            catch (e) {
                alert(e)
            }
        });
    });
}

它可以在桌面和移动设备上正常工作。如果您在触摸设备中遇到任何问题，请将功能绑定到单击事件而不是“鼠标悬停”。

此外，对于地图方法，我强烈推荐 SVG 而不是图像。

于 2013-03-01T12:01:14.557 回答