|
<?xml
version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="455" height="314" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>Methoden zum Manipulieren von Attributen und
Style-Eigenschaften</title>
<defs>
<script type="text/ecmascript"><![CDATA[
function grow(evt,x,y,n) {
var svgdoc = evt.getTarget().getOwnerDocument();
svgdoc.getElementById('r'+n).getStyle().removeProperty('visibility');
svgdoc.getElementById('u'+n).setAttribute('transform',
'scale(1.2) translate('+x*0.8+' '+y*0.8+')');
}
function shrink(evt,x,y,n) {
var svgdoc = evt.getTarget().getOwnerDocument();
svgdoc.getElementById('r'+n).getStyle().setProperty('visibility','hidden');
svgdoc.getElementById('u'+n).setAttribute('transform',
'scale(1) translate('+x+' '+y+')');
}
]]>
</script>
<style type="text/css"><![CDATA[
text {
font-family: sans-serif;
font-size:26pt;
stroke: red;
stroke-width:1.5;
fill: yellow;
}
]]></style>
<image xlink:href="stern.svg" width="100"
height="100" x="0" y="0" id="stern"
transform="scale(.5)"/>
</defs>
<image xlink:href="capetown1_36.jpg" width="100%"
height="100%" x="0" y="0"/>
<rect width="100%" height="100%"
fill="white" stroke="none" fill-opacity=".8"/>
<a xlink:href="../svg/bsp31.svg" onmouseover="grow(evt,
100, 50, '1')" onmouseout="shrink(evt,100,50,'1')">
<rect id="r1" x="90" y="40"
width="250" height="70" fill="white"
fill-opacity="0.7" style="visibility:hidden;"
rx="20" ry="20"/>
<use id="u1" xlink:href="#stern"
x="0" y="0" transform="translate(100 50)"/>
<text id="t1" x="160" y="88">Beispiel
31</text>
</a>
<a xlink:href="../svg/bsp32.svg" onmouseover="grow(evt,
100, 110, '2')" onmouseout="shrink(evt,100,110,'2')">
<rect id="r2" x="90" y="100"
width="250" height="70" fill="white"
fill-opacity="0.7" style="visibility:hidden;"
rx="20" ry="20"/>
<use id="u2" xlink:href="#stern"
x="0" y="0" transform="translate(100 110)"/>
<text id="t2" x="160" y="148">Beispiel
32</text>
</a>
<a xlink:href="../svg/bsp33.svg" onmouseover="grow(evt,
100, 170, '3')" onmouseout="shrink(evt,100,170,'3')">
<rect id="r3" x="90" y="160"
width="250" height="70" fill="white"
fill-opacity="0.7" style="visibility:hidden;"
rx="20" ry="20"/>
<use id="u3" xlink:href="#stern"
x="0" y="0" transform="translate(100 170)"/>
<text id="t3" x="160" y="208">Beispiel
33</text>
</a>
</svg>
|
|
