链接html css和图像

我想为此图像添加动作因此，当用户悬停在红点上时，会显示一些信息，或者单击时（从引导模式出现）。我使用bootstrap，并在图像上传播div不会给出正常结果。我希望它能够响应。有任何想法吗？链接html css和图像

来源

2016-08-14 Rahim Rahimli

也许通过检查光标所在的坐标，相对于图片。如果它在正确的位置，然后做弹出？ –

这应该需要JavaScript？和很多工作没有？） –

你可能更好地在某些点添加div覆盖，然后添加悬停为该覆盖编辑：有人已经回答了那个笑lol –

我通过删除在Photoshop红点，然后使用纯HTML添加它们解决了这个问题（I由具有的红点背景图像按钮），那么我放置在此点上随机的路线图

来源

2016-09-04 09:00:07

在html dom上应该有一个关于javascript的onhover方法。

<div id="point1" onmouseover="doHover('point1', true);" onmouseout="doHover('point1', false);"></div>

来源

2016-08-14 19:55:41 COOLGAMETUBE

所以这应该如何链接HTML与图像？） –

当你添加div的每个点，并将其用作“隐形按钮”，你可以悬停 – COOLGAMETUBE

我知道它:)问题是修复div红点 –

所以，你必须用div的一个问题？

function doHover(id, bool) { 
 
    var obj = document.getElementById("hoverPoint"+id); 
 
    if(bool) { 
 
    obj.style.backgroundColor="green"; 
 
    }else { 
 
    obj.style.backgroundColor="blue"; 
 
    } 
 
}

.hoverPoint { 
 
    position:absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width:100px; 
 
    height:100px; 
 
    display:block; 
 
    background-color: blue; 
 
    opacity: .6; 
 
} 
 

 
#hoverPoint1 { 
 
    top: 130px; 
 
    left: 135px; 
 
}

<img src="http://i.stack.imgur.com/sUTxI.png" style="width:777px; height:292px" /> 
 
<div class="hoverPoint" id="hoverPoint1" onmouseover="doHover(1,true);" onmouseout="doHover(1,false);"></div>

来源

2016-08-14 20:17:56 COOLGAMETUBE

链接html css和图像

回答

相关问题