Zoom-Funktion - Website X5 Hilfe - Die Helpsite

Bilder auf den Server in das Verzeichnis "images" kopieren.
Example:
demo_img2.jpg
demo_img3.jpg


Demo:

Code für den HEAD-Bereich:

<script type="text/javascript">

var zaehler = 50;
function aufmachen(breite,ID) {
if (zaehler < breite) {
 document.getElementById(ID).style.display="inline";
 document.getElementById(ID).style.width=zaehler+"px";
 zaehler += 10;
 window.setTimeout("aufmachen("+breite+",'"+ID+"')",0);
}
else {
 document.getElementById("beschreibung-"+ID).style.display="block";
}
}
function zumachen(ID) {
document.getElementById(ID).style.display="none";
document.getElementById("beschreibung-"+ID).style.display="none";
zaehler = 50;
}
</script>

<style type="text/css">
.bereich {
position: absolute;
text-align: center;
font-weight: bold;
}

.beschreibung {
color: #FFFFFF;
background-color: #000000;
display: none;
}
</style>

Code für das HTML-Objekt:

<span class="bereich">
<img src="images/demo_img2.jpg" alt="" style="display: none;" id='bild_2' border="0" onMouseOut="zumachen('bild_2');"><br>
<span id="beschreibung-bild_2" class="beschreibung">
Hauseingang
</span>
</span>
<img src="images/demo_img2.jpg" width="190" height="140" border="0" onClick="aufmachen(300,'bild_2');" style="margin-right: 15px; cursor: pointer;">

<span class="bereich">
<img src="/images/demo_img3.jpg" alt="" style="display: none;" id='bild_3' border="0" onMouseOut="zumachen('bild_3');"><br>
<span id="beschreibung-bild_3" class="beschreibung">
Vorgarten
</span>
</span>
<img src="images/demo_img3.jpg" width="190" height="140" border="0" onClick="aufmachen(300,'bild_3');" style="margin-right: 15px; cursor: pointer;">