SVG: Im <OBJECT>-Tag anklickbar machen (Teil 2)

Hier noch eine weitere Variante, welche praktikabler bei Funktionsaufrufen ist. Auf die Größenangabe über den DIV-Selektor wurde hier verzichtet, weiterhin wird als Parent-Element der <SPAN>-Tag verwendet, was ein horizontales Aneinanderreihen der Grafiken erleichtert.
Die hier beschriebene Methode (ohne style-Attribut) ist von der Struktur her, etwas sauberer.

Beispiel

<span class="svglink" style="width: 167px; height: 77px;">
  <a href="javascript:alert('Test')" style="width: 167px; height: 77px;"></a>
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>      
</span>

Die CSS-Klasse svglink

.svglink {
  position: relative;
}
span.svglink  {
  display: inline-block;
}
/* IE7-Hack, gleicht das Aussehen etwas an */
*+html .svglink  {
  padding: 0 0.25em 0.25em 0;
}  
.svglink a, .svglink object  {
  position: absolute;
  width: inherit;
  height: inherit;
}  
.svglink a  {
  /* Die (beiden!) Eigenschaften sind wichtig,
  da im IE die SVG sonst nicht anklickbar ist. */ 
  background-image: url(1x1transp.gif);
  background-color: transparent;
  z-index: 2;
}
.svglink object  {
  z-index: 1;
}

Der Unterschied zu der hier beschriebenen Methode, ist die Zuweisung von display: inline-block; bei der Verwendung des <SPAN>-Tags.
Es kann parallel mit dem <DIV>-Tag gearbeitet werden.

komplettes Beispiel

SVG: Im <OBJECT>-Tag anklickbar machen (Teil 1)

Wer eine SVG wie im Post beschrieben einbettet, wird feststellen das man die Grafik nicht wie gewohnt verlinken kann (Beispiel 1). Auch die Verwendung eines onklick-Events führt nicht zum Erfolg (Beispiel 2).

Beispiel 1 (funktioniert nicht)

<a href="javascript:alert('Test')">
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>
</a>

Beispiel 2 (funktioniert nicht)

<object data="logo.svg" onlick="alert('Test')" type="image/svg+xml" width="167" height="77">
  <param name="src" value="logo.svg" />
  <param name="wmode" value="transparent" />
  <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
</object>

Abhilfe schafft hier das Schließen des Links (</a>) vor dem OBJECT-Tag und etwas CSS.

Beispiel 3 (funktioniert)

<div class="svglink" id="svg1">
  <a href="javascript:alert('Test')"></a>
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>
</div>

Der Parameter wmode ist hier nicht optional, sonst ist die Grafik im IE nicht anklickbar.

Die CSS-Klasse svglink

.svglink {
  position: relative;
}  
.svglink a, .svglink object  {
  position: absolute;
  width: inherit;
  height: inherit;
}  
.svglink a  {
  /* Die (beiden!) Eigenschaften sind wichtig,
  da im IE die SVG sonst nicht anklickbar ist. */ 
  background-image: url(1x1transp.gif);
  background-color: transparent;
  z-index: 2;
}
.svglink object  {
  z-index: 1;
}

Bei dem als Hintergrund verwendeten Bitmap, handelt es sich um eine 1 Pixel große GIF-Datei mit eingeschalteter Transparenz (sie ist auch Teil des unten angehängten Downloads).

Weitere CSS-Eigenschaften

Die Größe der Grafik sollte in em angegeben werden, um ein korrektes Skalieren zu ermöglichen. Deshalb ist hier ein weiterer DIV-Selektor notwendig, dieser korrigiert gleichzeitig das Fehlen der inherit CSS-Eigenschaft im IE6 und IE7.

/* IE7 kennt kein inherit,
daher der zusätzliche Selektor */
#svg1, #svg1 a  {  
  width: 10.4375em;  /* 167px / 16 = 10,4375em */  
  height: 4.8125em;  /*  77px / 16 =  4,8125em */ 
}

komplettes Beispiel

SVG: Crossbrowser kompatibel & XHTML valide referenzieren

Alle Standardbrowser können mehr oder weniger mit SVG-Grafiken umgehen. Der IE, im Moment nur über das Adobe SVG-Plugin (Adobe SVG-Viewer 3.03). Ab Version 9 des IE ist hier Besserung in Sicht und damit haben SVG-Grafiken eine gute Chance, sich weiter zu verbreiten.

SVG-Grafik

<object data="logo.svg" type="image/svg+xml" width="167" height="77">
  <param name="src" value="logo.svg" />
  <param name="wmode" value="transparent" />
  <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
</object>

Der erste eingebettete param-Tag dient den IE's als Referenz auf die Datei. Der Internet Explorer kann hier keine Dateien per HTTP referenzieren!? Deshalb wird die Beispieldatei hier auch nicht angezeigt. Das sollte aber in der Praxis nicht weiter stören.
Der Parameter wmode ist optional, gleicht aber das Verhalten der SVG's im IE, an dass, der anderen Browser an.
Der eingebettete img-Tag wird benutzt wenn der Browser keine SVG anzeigen kann.

Javascript - Schieberegler (Slidebar)

Cross-Browser kompatibel und XHTML-valide

Zum Testen einfach den Slider bewegen.

TEST

Javascript im HEAD:

// Startwert des Mouseevents speichern
var startY = 0;
// Starten und Beenden des Drag-Events
var start_drag = false;
// Dragobjekt
var slider = null;

window.onload = Init;

function Init()  {
  slider = document.getElementById("slidebar");
  slider.style.position = 'absolute';
  slider.style.top = '25px';
  slider.style.left = '1px';
  
  slider.onmousedown = StartDrag;
  document.onmousemove = Drag;
  document.onmouseup = StopDrag;
  
  // Standardevents ausschalten (Firefox)
  with(document.getElementById("slidebarwrapper"))
  { 
    onmousedown = function() { return false; };
    onmousemove = function() { return false; };
  }
}
function StartDrag(e)  {
  // Browserweiche
  if(!e)
    e = window.event;
  
  // Startwert merken  
  startY = e.screenY - parseInt(slider.style.top);
  start_drag = true;
}
function Drag(e)  {
  if(start_drag)  {
    // Browserweiche
    if(!e)
      e = window.event;
      
    // Mausposition - Startwert
    var posY = e.screenY - startY;
    // Schiebebereich einschraenken    
    if(posY > 25 && posY < 70)  {
      // Position zuweisen
      slider.style.top = posY + "px";
      // Schriftgroesse aendern
      document.getElementById("testword").style.fontSize = posY - 10 + "px";
    }
  }
}
function StopDrag(e)  {
  start_drag = false;
}

CSS im HEAD:

#slidebarwrapper  {
  position: relative;
  width: 127px;
  height: 106px;
}
#testword  {
  margin: 0;
}

HTML im BODY:

<div id="slidebarwrapper">
  <img src="html.gif" width="127" height="106" alt="HTML" />
  <img src="slider.gif" width="24" height="8"
  alt="Schriftgrösse regeln" id="slidebar" />
</div>
<p id="testword">TEST</p>