|
Dieses JavaScript zeigt Bilder animiert, mit einer Art "Zoom"-Funktion an. Um die Animation zu starten klicken Sie auf ein Bild. |
|
Quelltext: <script type="text/javascript"> // Bilder anzeigen mit "Zoom"-Funktion 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> <!-- Erstes Bild --> <span class="bereich"> <img src="gross1.jpg" style="display: none;" id="bild_1" border="1" onMouseOut="zumachen('bild_1');"><br> <span id="beschreibung-bild_1" class="beschreibung"> Beschreibung 1 </span> </span> <img src="klein1.jpg" border="1" onClick="aufmachen(250,'bild_1');" style="cursor: pointer;"> <!-- Zweites Bild --> <span class="bereich"> <img src="gross2.jpg" style="display: none;" id="bild_2" border="1" onMouseOut="zumachen('bild_2');"><br> <span id="beschreibung-bild_2" class="beschreibung"> Beschreibung 2 </span> </span> <img src="klein2.jpg" border="1" onClick="aufmachen(250,'bild_2');" style="cursor: pointer;"> = Bild-ID = Bildbreite (großes Bild) = Bildbreite (kleines Bild) Wert erhöhen für einen schnelleren Zoom • Bilder mit "Zoom"-Funktion (ohne Animation)
Quelltext:
<script type="text/javascript">
function anzeigen(das){
if(document.getElementById(das).style.display=="none") {
document.getElementById(das).style.display="inline";
}
else {
document.getElementById(das).style.display="none";
}
}
</script>
<style type="text/css">
.bereich {
position: absolute;
text-align: center;
font-weight: bold;
}
.beschreibung {
color: #FFFFFF;
background-color: #000000;
display: block;
}
</style>
<!-- Erstes Bild -->
<span class="bereich" style="display: none;" id="bild1">
<img src="gross1.jpg" border="1" onMouseOut="anzeigen('bild1');"><br>
<span class="beschreibung">Beschreibung 1</span>
</span>
<img src="klein1.jpg" border="1" onClick="anzeigen('bild1');">
<!-- Zweites Bild -->
<span class="bereich" style="display: none;" id="bild2">
<img src="gross2.jpg" border="1" onMouseOut="anzeigen('bild2');"><br>
<span class="beschreibung">Beschreibung 2</span>
</span>
<img src="klein2.jpg" border="1" onClick="anzeigen('bild2');">
= Bild-ID
Beispiele zum herunterladen: bilder_zoom_funktion.zip Siehe auch: Bilder mit Sprechblasen
|
Das könnte Sie interessieren:
Datum - Anzeige des Datums
Formularfelder dynamisch hinzufügen
Guten Tag - Wenn jemand die Seite öffnet erscheint ein "Guten Tag".
Rahmen entfernen
JS-Index - Objekteigenschaften
Lichtregler
JavaScript Bausteine 9
Info - Mit Links kann man auch Javascript ausführen.
Menü der Webseite in der Suchleiste des Browsers anzeigen
Die aktuelle Position ermitteln - Das Script ermittelt die aktuelle Position des Mauszeigers.
Checkboxen mit JavaScript überprüfen - Mit diesem JavaScript lassen sich Checkboxen (von unterschiedlicher Anzahl) überprüfen ob der Benutzer diese ausgewählt hat.
…mehr