鏈接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和圖像

回答

相關問題