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 84
Zur Übersicht

84. Opacity-Rollovers (SVG/CSS) (01.03.2002)

Während in den konventionellen Browsern noch keine W3C-konforme Möglichkeit zur Festlegung von Werten für die Durchsichtigkeit (Transparenz) bzw. Deckkraft (Opazität) von Objekten existiert (siehe Tipp 48), kann man in SVG-Dokumenten bereits von der Style-Eigenschaft opacity Gebrauch machen. Neben dieser stehen noch die Varianten fill-opacity, stroke-opacity sowie flood-opacity und stop-opacity zur Verfügung:


            opacity – allgemein für Container- und Grafikelemente

            fill-opacity und stroke-opacity –
              Formenelemente (rect, circle, ellipse, line, polyline, polygon)
              sowie Textinhaltselemente (text, tspan, tref, textPath)

            flood-opacity – für feFlood-Filterelemente

            stop-opacity – für stop-Elemente
              innerhalb der Elemente linearGradient bzw. radialGradient
Der Standardwert ist 1 und bewirkt die 100%ige Sichtbarkeit bzw. 0% Transparenz. Mit Dezimalwerten zwischen 0 und 1 kann der Grad der Durchsichtigkeit entsprechend verändert werden.


Interessant ist nun die Steuerung über Scriptfunktionen, die z. B. mit den Event-Handlern onmouseover bzw. onmouseout aktiviert werden können. Im folgenden Beispiel wird das anhand einer SVG-Balkengrafik demonstriert. Im Codeausschnitt ist das Markup des blauen Balkens (rect-Element) zu sehen. Neben der kleinen Animation zum Ausfahren des Balkens innerhalb von 10 Sekunden und den bereits im Tipp 80 vorgestellten Tooltip-Funktionen wird die JavaScript-Funktion SetOpacity() wirksam.

            
            SVG-Markup:

            <rect x="150" y="147" width="0" height="15" style="fill: #0000CC"
              onmousemove="ShowTooltip(evt,'Electro')"
              onmouseover="SetOpacity(evt,'0.5')"
              onmouseout="SetOpacity(evt,'1.0')">
              <animate attributeName="width" begin="0s" dur="10s" fill="freeze"
                from="0" to="278"/>
            </rect>


            JavaScript-Funktion:

            function SetOpacity(e,op)
            {
              e.target.getStyle().setProperty("fill-opacity",op);
            }
Das Kürzel evt bezieht sich dabei auf das gerade ausgelöste Ereignis, hier also auf mouseover/mouseout des jeweiligen rect-Elements. Der fill-opacity-Wert wird bei Mausberührung auf 0.5 und beim Verlassen des Bereiches wieder auf 1.0 gesetzt (vgl. die folgende Abbildung und das komplette Beispiel 84a). Die verwendete Grafik wurde mit Hilfe eines PHP-Moduls dynamisch generiert. Zum Testen der Ausgabe von Kreis- und Balkendiagrammen steht ein Dateneingabe-Formular bereit.



Browserdarstellung der SVG-Grafik mit dynamischer Opazität



Beispiel 84b zeigt eine Möglichkeit, den Effekt mit den proprietären CSS-Techniken von IE und Mozilla zu realisieren (siehe den eingangs genannten Verweis zu Tipp 48). Wichtig ist dabei die Positionierung der A-Elemente (Eigenschaft Position). Im IE funktioniert es nur bei absoluter Positionierung (Wert absolute), während Mozilla auch bei der Angabe der Werte relative oder fixed mitspielt.

      
      A.roll
      {
      Color: #FFFFFF;
      Background-Color: #0000CC;
      Position: absolute;
      Text-Decoration: underline;
      Filter: Alpha(opacity=100);
      -moz-opacity: 1.0;
      }

      
      A.roll:HOVER
      {
      Text-Decoration: none;
      Filter: Alpha(opacity=50);
      -moz-opacity: 0.5;
      }


      Alternativer Zugriff mittels Scripting:

      object.style.filter="Alpha(opacity=wert)"; // IE
      object.style.MozOpacity="wert"; // Mozilla