SVG-Imagemap (Tooltips mit Bildern)

[Fieterich]

Hallo,

ich verwende das untenstehende Prinzip, um Programmfunktionen zu erklären. Es wäre für die ein oder andere Sache ganz nett, wenn in den Tooltips, die ja hier mit <title>TOOLTIP</title> realisiert sind, zusätzlich Bilder untergebracht werden können. So könnte ich z. B. kleine Pop-Up-Fenster zeigen usw..

Beispiele habe ich gefunden, aber nicht bezogen auf SVG. Ich bin für jeden Hinweis dankbar.

<div style="max-width:1382px; margin-left:0px">
          <figure id="imagemap" style="width:100%"></figure>
          <figcaption style="margin-bottom:5px"> Klicken Sie auf die Zahlen, um
            nähere Informationen zu erhalten!</figcaption> 
          <svg version="1.1"
            xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 1382 751" preserveAspectRatio="xMinYMin meet">
            <defs>
              <style> circle:hover { fill: white; opacity:0.3; }</style> </defs>
              <image width="1382px" height="751px" xlink:href="auswertung.png">
              <title>Konfiguration... </title>
              </image>
              <a xlink:href="#funktionen1"><circle cx="960" cy="88" r="14" opacity="0"               
                title="Funktionen1"></circle></a>
              <a xlink:href="#funktionen2"><circle cx="422" cy="270" r="14" opacity="0"
                title="Funktionen2"></circle></a>
              <a xlink:href="#funktionen3"><circle cx="328" cy="588" r="14" opacity="0"
                title="Funktionen3"></circle></a>
          </svg>
      </div>

Gruß

Fieterich