使用圖標創建交互式地圖

我想讓它懸停在圖標上，它會有鏈接的實時預覽。我知道我需要使用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改變的HREFs你什麼都想要和鏈接將在iframe中加載。

這是你的新代碼（也優化了你的CSS）：

<!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>

希望得到您開始，好運。

來源

2016-07-08 21:06:53

我想要它，當我將鼠標懸停在圖標上時，它會顯示網頁的實時預覽。我現在只是使用谷歌作爲測試頁 –

好吧，我剛剛拿出谷歌，因爲有一個跨域的域名問題，這意味着谷歌不會讓我加載一個域的網頁不= google.com無論如何，你可以只需更換a中的hrefs即可。該頁面將加載在iframe的頂部。 –

您可能希望使用Google地圖來實現此目的，這將簡化操作 - 您可能需要查看http://w3schools.com/howto部分以瞭解更多信息。

來源

2016-07-09 04:20:36

使用圖標創建交互式地圖

回答

相關問題