链接HTML CSS和图像

Question

I would like to add actions to this image So when the user hovers over red dot, some information appears, or when clicks (modal from bootstrap appears). I am using bootstrap, and spreading divs over the image don't give normal result. I want it to be responsive. Any ideas?

Answer 1

在html dom上应该有一个JavaScript的onhover方法。

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

Answer 2

So, you have a problem with the divs?

 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> 

Answer 3

我通过在Photoshop中删除红点解决了问题，然后使用纯html将其添加（我用红点的背景图像制作了按钮），然后将这些点随机放置在路线图上