Question

开发人员我正在为我的网站使用 Image-map。到目前为止一切正常，链接工作正常，突出显示图像地图区域。但我想将导览添加到可能的图像地图区域，即图像区域（坐标）的提示。我尝试了许多 jquery 插件（introjs、bootstro、uxtour、asimple tour）并编写了 vanilla JavaScript，但都是徒劳的 :-(

这是我正在使用的代码

<img src="./Public Private Partners_files/mdm-img.png" usemap="#image-map" class="map">

<map name="image-map">
  <area target="_self" alt="Meta Data" title="Meta Data" href="#" coords="66,80,666,153" data-step="1"
    data-intro="Hello all! :) Read Meta Data Here." id="metaData" shape="rect" />
  <area target="_self" alt="Access Control" title="Access Control" href="#" coords="225,179,516,213" data-step="2"
    data-intro="Hello all! :) Read Access Control here" id="accessControl" shape="rect" />
  <area target="" alt="Data Service Bus" title="Data Service Bus" href="#" coords="109,231,625,299" data-step="3"
    data-intro="Hello all! :) Read Data Bus Service." id="dataServices" shape="rect" />
  <area target="_self" alt="External MDR" title="External MDR" href="#" coords="161,365,571,494" data-step="4"
    data-intro="Hello all! :) Read External MDR here." id="externalMDR" shape="rect" />
  <area target="_self" alt="Data Anonoymization" title="Data Anonoymization" href="#" data-step="5"
    data-intro="Hello all! :) Read Data Anonoymization Here." coords="158,565,307,604" shape="rect" />
  <area target="_self" alt="Internal MDR" title="Internal MDR" href="#" coords="160,624,572,754" shape="rect" />
  <area target="_self" alt="Data Profiling" title="Data Profiling" href="#" coords="161,810,571,928" shape="rect" />
  <area target="_self" alt="Transactional Databases" title="Transactional Databases" href="#" coords="65,1000,670,1177"
    shape="rect" />
  <area target="_self" alt="Transactional Databases" title="Transactional Databases" href="#" coords="640,666,823,686"
    shape="rect" />
  <area target="_self" alt="Data Cleansing" title="Data Cleansing" href="#" coords="640,690,824,710" shape="rect" />
  <area target="_self" alt="Internal MDR" title="Internal MDR" href="#" coords="640,715,851,736" shape="rect" />
  <area target="_self" alt="Data Anonymization" title="Data Anonymization" href="#" coords="640,741,823,760"
    shape="rect" />
  <area target="_self" alt="External MDR" title="External MDR" href="#" coords="640,764,859,788" shape="rect" />
  <area target="_self" alt="Data Subscription Bus" title="Data Subscription Bus" href="#" coords="642,793,822,814"
    shape="rect" />
  <area target="_self" alt="Access Control Layer" title="Access Control Layer" href="#" coords="641,819,823,840"
    shape="rect" />
  <area target="_self" alt="Meta Data" title="Meta Data" href="#" coords="641,844,816,863" shape="rect" />
</map>

目前使用 introjs 和 jquery.maphighlight.js

$(document).ready(function(e) {
  //    $('img[usemap]').rwdImageMaps();
  $(".map").maphilight({
    fill: false,
    fillColor: "000000",
    fillOpacity: 0.1,
    stroke: false,
    strokeColor: 'ffffff',
    strokeOpacity: 0.5,
    strokeWidth: 1,
    fade: true,
    alwaysOn: false,
    neverOn: false,
    groupBy: false,
    wrapClass: true,
    shadow: true,
    shadowX: 0,
    shadowY: 0,
    shadowRadius: 10,
    shadowColor: "ffffff",
    shadowOpacity: 0.5,
    shadowPosition: "outside",
    shadowFrom: false,
  });
  introJs().start();
});

如何为图像地图区域提供导览（工具提示导览）

0 个答案: