JavaScript Event | Info-Box

Kopieren Sie den Code in folgende Flächen:

After_Load:

tooltips = document.getElementsByClassName('imagemap_tooltip');
            for (var i=0; i<tooltips.length;i++) {
                tooltips[i].setAttribute("id", tooltips[i].getAttribute("id")+"__box");
            }

Before_Load:

var mapID="aeImgMapID3335057810";
var initialText ="<h4>Info-Box</h4>";

    var mapSVG = '#' + mapID + '_content svg';
    jQuery(mapSVG).wrap("<div class='mapPanelWrap'></div>");
    var height =  jQuery(mapSVG).height();
    var width = jQuery(mapSVG).width();
    jQuery('.mapPanelWrap').append('<div class="informationFrame" style="height:  ' 
            + height + 'px"  ><div class="informationContainer"><div class="areaName"> ' +
         initialText + '</div><p class = "informationText"></p></div></div>');
    jQuery('.informationContainer').css("height", (height/1.75)+"px");
    //jQuery('.mapPanelWrap').append('<div style="clear: both"></div> ');
    jQuery('.mapPanelWrap').css('width', width+jQuery('.informationFrame').width()+10);

Folgendes ist zu ersetzen:

var mapID=”aeImgMapID3335057810″;

Die aeImgMapID3335057810 finden Sie im Quelltext nach dem die Karte bereits sichtbar ist.

Click:

var deepestElement=function(e) {
    var t = jQuery(e).children();

  while(t.length) {
    t =  t.children();
  }

  return t.end();
}
var tooltip = document.getElementById(mapID + "_tooltip_" + this.data("id") + "__box");
      this.data("set").forEach(function (element) {
          console.log(element);
          console.log(element.attrs.text);
          if (element.type==="text") {
              var areaNames=jQuery('.areaName');
              for (var i=0;i<areaNames.length;i++) {
                 jQuery(deepestElement(areaNames[i])).text(element.attrs.text);
              }
              //jQuery('.areaName').text(element.attrs.text);
              jQuery('.informationText').text("");
              if (tooltip !== null) {
                jQuery('.informationText').text(tooltip.innerHTML);
              }
          }
      });

CSS-Code:

.mapPanelWrap {
    display: inline;
}

.mapPanelWrap svg {
    margin-right: 10px;
    float: left;
}

.informationFrame {
            border: 1px solid black;
            float: left;
            background-color: darkred;
            width: 140px;
            overflow: scroll;
}

.informationFrame * {
     margin-left: 10px;
     margin-right: 10px;
}

.areaName {
     font-family: "Noto Sans",sans-serif;
     font-size: 15px;
     color: white;
     margin-top: 10px !important;
}

.informationText {
    color: #eaeaea;
    font-size: 14px;
}