MouseClick Vergrößerung - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

MouseClick Vergrößerung

Scripte > Bildobjekte
Bildobjekte mit verzögertem Zoom-Effekt
Um ein Bild auf der Homepage darzustellen und per Mouseclick zu vergrößern bedarf es einiger kleiner Tricks, unter anderem hier mit Javascript.
Wer genau hinsieht: Das vergrößerte Bild legt sich optisch einfach über das kleine Bild.
Die Darstellung auf der Homepage wird mit diesem Einträgen festgelegt: width='..' die Objekthöhe ergibt sich automatisch im Verhältnis zum Originalbild. Das Bild auf dem Server muss mindestens so groß sein, wie die Abmessung im onClick="aufmachen(500,.....) festgelegt wurde, kann aber auch größer sein. Die hier genannte 500(px) bestimmt die Zoom-Größe des Bildes und kann für jedes Bild, wie in der Demo dargestellt, individuell festgelegt werden.
HTML-Code einfach nur kopieren und in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen, Bilddateien austauschen und im Code anpassen. Code für den HEAD-Bereich <head>...</head> einfach unverändert in den Bereich einfügen.
Download Button

Atmosphere

Galaxy
Code für den <HEAD> Bereich
<script>
// 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 += 20;
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">
.Obj4_pos { position: absolute; text-align: center; font-weight: bold; }
.Obj4_txt { color: #FFFFFF; background-color: #000; display: none; }
.Obj4_bild { margin-right: 15px; cursor: pointer; }
</style>
Code für den <BODY> Bereich
<div align="left">
<span class="Obj4_pos">
<img src="http://x5forum.home-wiekau.de/wsX5Obj/Obj_IMG/img_1.jpg"
alt="Atmosphere" style="display: none;" id='BildObj4_1' onMouseOut="zumachen('BildObj4_1');">
<br>
<span id="Beschreibung-BildObj4_1" class="Obj4_txt">
Atmosphere
</span>
</span>
<img src="http://x5forum.home-wiekau.de/wsX5Obj/Obj_IMG/img_1.jpg"
width="300px" onClick="aufmachen(420,'BildObj4_1');" class="Obj4_bild">
<span class="Obj4_pos">
<img src="http://x5forum.home-wiekau.de/wsX5Obj/Obj_IMG/img_2.jpg"
alt="Galaxy" style="display: none;" id='BildObj4_2' onMouseOut="zumachen('BildObj4_2');">
<br>
<span id="Beschreibung-BildObj4_2" class="Obj4_txt">
Galaxy
</span>
</span>
<img src="http://x5forum.home-wiekau.de/wsX5Obj/Obj_IMG/img_2.jpg"
width="250px" onClick="aufmachen(500,'BildObj4_2');" class="Obj4_bild">
</div>
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2019





Besucher Statistik
» 2 Online
» 26 Heute
» 203 Gestern
» 450 Woche
» 2450 Monat
» 137367 Jahr
» 465123 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt