图像作为链接图 - 悬停以显示文本（工具提示），单击以更改/更新 div 内容 - 完全迷失在这里

问题描述 投票：0回答：0

首先，我是 HTML / CSS 的初学者，但通常可以做一些事情，但是当涉及到 JS 或 jQuery 时，困难的部分就开始了。

我正在为我自己的网站做点什么。

想法很简单，我有 2 个 div 对象，一个显示带有“可点击区域”的图片，第二个应该显示/隐藏分配给第二个 div 中该区域的内容。

因此，在我将光标放在某个指定的图像区域后，我想显示工具提示，当我单击该区域时，我想更改第二个 div 上的内容。

我能够找到一些能够在图片上显示工具提示的 JS 代码，但我真的不明白它是如何工作的。 更具体地说，我不知道它如何/在哪里存储坐标以知道要显示哪个工具提示。或者更准确地说，这个脚本如何知道什么 div 内容显示什么 pin（点）位置。 此外，该代码对我来说过于复杂，因为它检测到我并不真正需要的顶部或底部工具提示位置。

我从来不会用 JS 或 jQuery 编写代码，只是使用 Google 查找并在可能的情况下根据我的需要调整一些脚本。 我真的很感激任何帮助。

这是我目前所拥有的： https://poweritup.pl/Help-needed/test2.html

$(document).ready(function(){

    // set the image-map width and height to match the img size
    $('#image-map').css({'width':$('#image-map img').width(),
                      'height':$('#image-map img').height()
    })
    
    //tooltip direction
    var tooltipDirection;
                 
    for (i=0; i<$(".pin").length; i++)
    {               
        // set tooltip direction type - up or down             
        if ($(".pin").eq(i).hasClass('pin-down')) {
            tooltipDirection = 'map-tooltip-down';
        } else {
            tooltipDirection = 'map-tooltip-up';
            }
    
        // append the tooltip
        $("#image-map").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
                                            <div class='map-tooltip'>" + $(".pin").eq(i).html() + "</div>\
                                    </div>");
    }    
    
    // show/hide the tooltip
    $('.map-tooltip-up, .map-tooltip-down').mouseenter(function(){
                $(this).children('.map-tooltip').fadeIn(100);
            }).mouseleave(function(){
                $(this).children('.map-tooltip').fadeOut(100);
            })
});

// 附加工具提示 - 这部分就像巫师咒语 - 根本不明白它在做什么

我的 HTML 看起来像：

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="bootstrap.css" rel="stylesheet">
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <link href="style.css" rel="stylesheet">
        <script src="main.js"></script>
    </head>
<body>
<section>
<div class="row">

<div class="col-md-8 col-sm-8">
 <div id="image-map">
   <img width="582" height="600" src="Forum1.png" alt="Forum sample">   
  
  <div class="pin pin-down" data-xpos="95" data-ypos="196">       
      <strong>Tooltip 1</strong>
  </div>
  <div class="pin pin-down" data-xpos="207" data-ypos="327">       
      <strong>Tooltip 2</strong><br>
      <p>
      Lorem ipsum dolor sit amet consectetuer... 
      </p>
  </div>
  <div class="pin pin-down" data-xpos="255" data-ypos="204">       
      <strong>Tooltip 3</strong><br>
      <img src="pic.png">
  </div>
  <div class="pin pin-down" data-xpos="411" data-ypos="260">       
      <strong>Tooltip 4</strong><br>
      <a href="#">LINK</a>
  </div>
 </div>
</div>
<div class="col-md-4 col-sm-4">
 <div id="image-pin-description">
  <div class="img-pin0">
   <div class="img-pin1">
    <h2>Pin 1</h2>
    <p>
    Pin1 tekst<br>
    Pin1 tekst<br>
    Pin1 tekst<br>
    </p>
   </div>
   <div class="img-pin2">
    <h2>Pin 2</h2>
    <p>
    Pin2 tekst<br>
    </p>
   </div>
   <div class="img-pin3">
    <h2>Pin 3</h2>
    <p>
    Pin3 tekst<br>
    </p>
   </div>
   <div class="img-pin4">
    <h2>Pin 4</h2>
    <p>
    Pin4 tekst<br>
    </p>
   </div>
  </div>   
 </div>
</div>
</div>
</section>
<body>
</html>

和CSS：


html {
    height: 100%;
    overflow: visible;
    position: relative;
    max-width: 844px;
    margin: 50 auto;
}
#image-map {
    position: relative;
    padding: 0px;
}
.pin {
    display: none;
}
.map-tooltip-up, .map-tooltip-down {
    position: absolute;
    background-color: #CD2727;
    width: 25px;
    height: 25px;
    border-radius: 50%
}
.map-tooltip-down {
    background-position: 0 -37px;
}
.map-tooltip {
    display: none;
    width: 150px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 7999;
    margin-left: -85px;
    padding: 10px;
    color: #FFFFFF;
    text-align: center;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.65);       
}
.map-tooltip::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: 0px;
    border-bottom: 10px solid #000000; 
    border-left: 10px solid transparent;
    border-right : 10px solid transparent;
}
.map-tooltip-down .map-tooltip {
    bottom: 20px;
    top: auto;
}
.map-tooltip-down .map-tooltip::after {
    bottom: -10px;
    top: auto;
    border-bottom: 0;
    border-top: 10px solid rgba(0, 0, 0, 0.65);
}
.img-pin0 {
    position: relative;
    width: 265px;
    height: 600px;
    background: url("Forum4.png") no-repeat center;
    overflow-y: scroll;
    padding: 0px;
}
.img-pin1 {
    position: relative;
    width: 190px;
    height: 600px;
    padding: 0px;
    text-align: left;
    color: #FF10F0;
    margin-left: 55px;
    margin-top: 20px;
}
.img-pin2 {
    position: relative;
    width: 190px;
    height: 600px;
    padding: 0px;
    text-align: left;
    color: #FF10F0;
    margin-left: 55px;
    margin-top: 20px;
    display: none;
}
.img-pin3 {
    position: relative;
    width: 190px;
    height: 600px;
    padding: 0px;
    text-align: left;
    color: #FF10F0;
    margin-left: 55px;
    margin-top: 20px;
    display: none;
}
.img-pin4 {
    position: relative;
    width: 190px;
    height: 600px;
    padding: 0px;
    text-align: left;
    color: #FF10F0;
    margin-left: 55px;
    margin-top: 20px;
    display: none;
}

Efect（好的，我知道它的样子——它只是为了展示我尝试做的事情）可以在这里找到： https://poweritup.pl/Help-needed/test2.html

我真的不知道如何让我的图钉可点击，我假设我需要在 JS 中使用类似 onClick 事件的东西，但我需要以某种方式检测点击了哪个图钉（通过坐标），并根据点击的图钉隐藏我的 div 的默认内容“img-pin1”并将其替换为“img-pin2”或“img-pin3”的内容，但不知道该怎么做，因为我几乎可以肯定我无法使用 css 或 html 来完成。

我尝试使用这个简单的脚本：

<button onclick="showimg-pin2()">Link</a>

<div id="img-pin2" style="display:none;"></div>

function showimg-pin2() {
  var x = document.getElementById("img-pin2");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

但是它只能显示或隐藏div，我需要用新的div替换默认内容。 也不知道如何将它与图像地图上现有的图钉链接起来:(

所以我在这里找到了这个： 点击链接时更新div内容

var btn = document.querySelectorAll('.classNameYouLike');
for (var i in btn) {
    btn[i].onclick = function(e) {
        e.preventDefault();
        document.querySelector('#container').innerHTML = document.querySelector(e.target.getAttribute('data-source')).innerHTML;
    };
}

<a class="glyphicon glyphicon-cutlery classNameYouLike" data-source="#food">food</a>
<a class="glyphicon glyphicon-cutlery classNameYouLike" data-source="#water">water</a>

<div id="food"  style="display:none;">Clicking Food Link Shows this in Div</div>
<div id="water"  style="display:none;">Clicking Water Link Shows this in Div</div>

<div id="container" style="width:100%; height:150px;">This Div box is Empty till you click one the links, then its Populated by the correct stuff</div>

这几乎正是我要找的东西，但仍然不知道如何代替文本、链接或按钮将它连接到我已经存在的“pin”及其坐标

如果有人足够好地向我指出任何我能理解和学习的教程或简单的代码示例，我将非常感激。

问候。

javascript html jquery tooltip imagemap
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.