Question

我正在尝试将其设置为当我将鼠标悬停在图标上时，它将实时预览链接。我知道我需要使用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>

Answer 1

请参阅此jsbin：http://output.jsbin.com/soxeqijove（我必须更改Cross Origin Request Stuff的链接）

基本上将href更改为您想要的内容，链接将加载到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>

希望能让你开始，祝你好运。

Answer 2

您可能希望使用Google地图，这会简化操作 - 您可能需要查看http://w3schools.com/howto部分以获取更多信息。

用图标创建交互式地图

2 个答案: