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. ~~~html <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

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. ~~~Html/SVG <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