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
