Question

编辑： 感谢您提供了很多关于如何解决这些问题的精彩示例。我不知道接受谁接受，但我将通过所有的例子，看看我最喜欢哪些。很棒的反馈家伙！ = d

我通常在闪存中做这些事情，但这次它必须与mac，iPad和所有这些单位兼容。

那么，我需要什么帮助？

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

这应该是相当基本且易于实现的，但是因为在我不得不问你们之前我从未在html中做过这个=）

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

任何帮助都会很棒！

BREAKDOWN：

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

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

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

Answer 1

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

Image of my example

See it on JSFiddle

<强> HTML

HTML应该看起来很漂亮，我们可以使用类<div>创建hotspot并依赖某些存在的东西。即.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之上来“模拟”它周围的边框。但是，有很多关于如何做到这一点的资源。

Answer 2

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

基本上，重点在于您将图像封装在相对定位的div 中，然后将热点绝对定位在同一div内。在热点div内，您将拥有更多的信息元素，仅显示在其父母的:hover上。

这使它变得简单，而且更容易获取。

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

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

您必须确保此width的{{1}}设置为图片的宽度，div设置为100％，以便在调整窗口大小时它低于图像宽度，保持在中心位置。

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

我为具有以下特征的热点创建了一个包装器max-width：

div

这基本上确保包装器margin: 0 auto; position: relative; width: 0px;找到图像的中心。然后，您将热点相对于图像的顶部中心位置，而不是左上角作为起点。

然后你有你想要的东西。

Working demo

Answer 3

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

使用OnMouseOver的示例如下：http://www.omegagrafix.com/mouseover/mousimap.html

Answer 4

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

例如：

 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而不是图像。

交互式HTML网页

4 个答案:

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