アイコンを使ったインタラクティブマップの作成

アイコンの上にマウスを置くと、リンクのライブプレビューが表示されるようにしています。私は病気がJavascriptかJQueryのどちらかを使う必要があることを知っていますが、私はコードを設定するのに助けが必要です。ここまで私のコードはこれまでのように見えます。アイコンを使ったインタラクティブマップの作成

<html> 
<head> 
<style> 

#map{ 
    position: relative; 
    width: 1250px 
} 

#Mexico{ 
    position: relative; 
    bottom:365px; 
    left:125px; 
    z-index: 1; 

} 

#Brazil{ 
    position: relative; 
    bottom:225px; 
    left:335px; 
    z-index: 1; 

} 

</style> 


</head> 
<html> 

<body> 
<div id="map"> 
    <img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/ci-world-map.png" alt="CI World Map"> 

</div> 

<div id="Mexico"> 
    <a href="http://www.google.com" target="_blank"> 
    <img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22" > 
    </a> 

</div> 

<div id="Brazil"> 
    <a href="http://www.google.com" target="_blank"> 
    <img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22" > 
    </a> 

</div>  

</body>  







</html>

出典

2016-07-08 Timothy Wong

このjsbinを参照してください：http://output.jsbin.com/soxeqijove（私はクロスオリジン・リクエストスタッフのためのリンクを変更しなければならなかった）

Basciallyしたいとのリンクがiframe内にロードされます、これまで何をのhrefを変更します。あなたが開始される

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<html> 
<head> 
<style> 

#map{ 
    position: relative; 
    width: 100%; 
    background-color: grey; 
} 

#Mexico{ 
    position: relative; 
    bottom:450px; 
    left:150px; 
    z-index: 1; 

} 

#Brazil{ 
    position: relative; 
    bottom:300px; 
    left:400px; 
    z-index: 1; 

} 

</style> 


</head> 
<html> 

<body> 
    <iframe src="" frameborder="0"></iframe> 
<div id="map"> 
    <img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/ci-world-map.png" alt="CI World Map"> 

</div> 

<div id="Mexico"> 
    <a href="http://output.jsbin.com/tuhekuwaja" target="_blank"> 
    <img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22" > 
    </a> 

</div> 

<div id="Brazil"> 
    <a href="http://output.jsbin.com/yaqawupeke" target="_blank"> 
    <img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22" > 
    </a> 

</div>  

    <script>$("a").mouseover(function(){ 
    var link=$(this).attr("href"); 
    $("iframe").attr("src",link); 

});</script> 

</body>  







</html> 
</body> 
</html>

希望、そしてグッドラック：

はここにあなたの新しいコードである（また、あなたのCSSを微調整）。

出典

2016-07-08 21:06:53

アイコンの上にカーソルを置くと、ウェブページのライブプレビューが表示されるようにします。私はちょうど今のテストページとしてgoogleを使用しています –

これは、googleを出ました。クロスオリジンドメインの問題があったためです。これは、Googleがドメイン= google.comではなくページでページを読み込ませないことを意味します。 aのhrefだけを置き換えてください。ページはiframeの一番上に読み込まれます。 –

これはGoogleマップを使用すると簡単になります。http://w3schools.com/howtoセクションで詳細を確認してください。

出典

2016-07-09 04:20:36

アイコンを使ったインタラクティブマップの作成

答えて

関連する問題