インタラクティブ画像AngularJs

AngularJSとHTMLを使用してWebサイトを作成しました。静止画像を読み込み、この画像に対話的なスポットを作成します。インタラクティブ画像AngularJs

この場所にマウスを置くと、ポップアップ通知と情報が表示されます。

私はどのライブラリを使用しますか？私は、OpenLayersをチェック私はそれは私が

をしたい何のための正しい選択である場合、私はこのようなソリューションを考えて知らない：

2016-10-12 user3836982

なぜあなただけの動的イメージに追加マップ/エリアタグを使用することはできませんか？ –

あなたがHTMLイメージマップを使用することができます。ここでは例です：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<p>Click on the sun or on one of the planets to watch it closer:</p> 

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 

<map name="planetmap"> 
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> 
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> 
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> 
</map> 

<script> 
$("area").hover(
    function() { 
    alert('This is ' + $(this).attr("alt")); 
    } 
); 
</script> 

</body> 
</html>

出典： w3schools jQuery

出典

2016-10-12 10:20:12

ありがとう、1つの質問：にアイコンを挿入することは可能ですか？ – user3836982

質問で私の編集を参照してくださいありがとう – user3836982

いいえ、それはそのようには動作しません。あなたのアイコンはイメージの一部である必要があります。アイコンをアニメーション化したい場合は、画像上のCSSアニメーションやgif画像を使用できます。 –

インタラクティブ画像AngularJs

答えて

関連する問題