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

[Matthias Apsel]

Hallo Fieterich,

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.

Was du in den Tooltips anzeigen möchtest, ist ja unabhängig vom Bildformat. Schau mal unter https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Tooltips_mit_CSS

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

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

Hier ist eine responsive Imagemap mit SVG.

• SVG/Anwendung und Praxis/responsive Imagemaps

Im Beispiel wird bei :hover die aktive Fläche von unsichtbar auf sichtbar geschaltet. Das könntest du auch mit einem Kindelement text innerhalb der aktiven Fläche verbinden.

Herzliche Grüße

Matthias Scharwies