Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 80
Zur Übersicht

80. Tooltips und Text-Hover in SVG (25.01.2002)

(I)  Im Tipp 79 wurde auf die Einbindung von Scripts in SVG-Dokumente hingewiesen. An dieser Stelle sollen zwei kleine Script-Ideen vorgestellt werden, die im Umfeld der Erzeugung von Balken- bzw. Kreisdiagrammen entstanden sind. Beim Berühren eines Kreissegmentes mit dem Mauszeiger soll eine kleine Textbox mit dem jeweiligen Namen aus der Abstimmung erscheinen (auch als Tooltip bekannt).

Dazu dienen je ein Rechteck und ein Textelement (beide sind zunächst unsichtbar) und zwei JavaScript-Funktionen: ShowTooltip() und HideTooltip(). In diesen Funktionen wird das Wurzelelement mittels document.documentElement abgefragt und dann über getElementById() auf die gewünschten Objekte zugegriffen. Attribute werden mit Hilfe von setAttribute() geändert. Innerhalb von ShowTooltip() wird der Text des Textelements dynamisch ausgetauscht, wobei die Methode setData() zum Einsatz kommt. Die Positionierung von Rechteck und Text erfolgt nach Abfrage der Mauskoordinaten mit getScreenX() bzw. getScreenY().

Um den Text im "abgerundeten" Rechteck zentriert erscheinen zu lassen, wird die Textbreite ermittelt und daraufhin die Rechteckbreite justiert. Hierbei hilft die Methode getComputedTextLength(), die die Breite eines Textes in Pixeln berechnet. Schließlich werden noch einige Style-Eigenschaften neu gesetzt, wobei vor allem die Umschaltung der Eigenschaft visibility von hidden auf visible hervorzuheben ist. HideTooltip() macht lediglich das Rechteck und den Textinhalt wieder unsichtbar. Die genannten Funktionen werden über die Event-Handler onmousemove bzw. onmouseout aufgerufen.


      SVG: Tooltip - ttr=Tooltip-Rechteck, ttt=Tooltip-Text

        <rect id="ttr" x="..." y="..." rx="..." ry="..." width="..." height="..."
          style="visibility: hidden"/>

        <text id="ttt" x="0" y="0" style="visibility: hidden">
          dyn. Text</text>


      JavaScript-Funktionen:

      function ShowTooltip(e,txt)
      {
        var svgdoc, ttrelem, ttrelem, posx, posy;
        svgdoc=document.documentElement;
        ttrelem=svgdoc.getElementById("ttr");
        tttelem=svgdoc.getElementById("ttt");
        tttelem.childNodes.item(0).setData(txt);
        posx=e.getScreenX();
        posy=e.getScreenY();
        ttrelem.setAttribute("x",posx);
        ttrelem.setAttribute("y",posy-20);
        tttelem.setAttribute("x",posx+5);
        tttelem.setAttribute("y",posy-8);
        ttrelem.setAttribute("width",tttelem.getComputedTextLength()+10);
        tttelem.setAttribute("style","fill: #0000CC; font-size: 11px;
         visibility: visible");
        ttrelem.setAttribute("style","fill: #FFFFCC; stroke: #000000;
         stroke-width: 0.5px; visibility: visible");
      }


      function HideTooltip()
      {
        var svgdoc, ttrelem, ttrelem;
        svgdoc=document.documentElement;
        ttrelem=svgdoc.getElementById("ttr");
        tttelem=svgdoc.getElementById("ttt");
        ttrelem.setAttribute("style","visibility: hidden");
        tttelem.setAttribute("style","visibility: hidden");
      }


      Funktionsaufruf:

        <objekt ... onmousemove="ShowTooltip(evt,'neuer Text')"
          onmouseout="HideTooltip()"/>
Browserdarstellung der SVG-Grafik mit Tooltip



(II)  Eine weitere Hilfsfunktion soll den bekannten HOVER-Effekt bei SVG-Textlinks simulieren. Die Funktion TextHover() erwartet eine ID, die neue Linkfarbe und den Wert für die Style-Eigenschaft text-decoration. Der Aufruf erfolgt via onmouseover bzw. onmouseout im jeweiligen Textelement.


      function TextHover(objid,color,decor)
      {
        var svgdoc, element;
        svgdoc=document.documentElement;
        element=svgdoc.getElementById(objid);
        element.setAttribute("style","fill: "+color+"; text-decoration: "+decor);
      }


      Funktionsaufruf:

        <a xlink:href="..."><text id="xyz" x="..." y="..." style="fill: #0000CC;
          font-size: 12px" onmouseover="TextHover('xyz','#FF0000','underline')"
          onmouseout="TextHover('xyz','#0000CC','none')">Linktext</text>
        </a>
Zur Live-Demonstration aller Funktionen dient wiederum das dynamisch generierte SVG-Dokument aus dem vorhergehenden Tipp, wobei in diesem Fall die Grafik nicht neu erzeugt wird, d. h. die jeweils letzte Version zum Einsatz kommt.