リンクhtml cssと画像

この画像にはアクションを追加しますユーザーが赤い点の上を飛ぶと、情報が表示されるか、クリック（ブートストラップからモーダルになる）が表示されます。私はブートストラップを使用しており、イメージ上にdivを広げても正常な結果は得られません。私はそれが敏感であることを望む。何か案は？リンクhtml cssと画像

出典

2016-08-14 Rahim Rahimli

おそらく、カーソルが位置している座標を画像と比較して確認することで可能です。それが正しい場所にあれば、ポップアップをしますか？ –

これにはjavascriptが必要ですか？そして多くの仕事はありませんか？） –

あなたはおそらく、特定のポイントでdivオーバーレイを追加して、そのオーバーレイのホバーを追加する方がいいでしょうか？EDIT：誰かがすでにそのLOLで答えています –

Iは、私はロードマップ上にランダムに、このドット配置（私は赤ドットの背景画像にボタンを作った）Photoshopで赤い点を削除した後、純粋なHTMLを使用してそれらを追加することによって、問題を解決し

出典

2016-09-04 09:00:07

javascriptのonhoverメソッドがhtml domにあるはずです。

<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

答えて

関連する問題