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

编程问答 2022-05-26

问题描述

开发人员 我正在为我的网站使用 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,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,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,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,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();
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-tourimagemapimagemapsterjavascriptjquery