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 einfach über das kleine Bild.
HTML-Code kopieren, Bildpfade anpassen und in den in den BODY-Bereich <body>.....</body> der ausführenden Seite an gewünschter Stelle einfügen. Code für den HEAD-Bereich einfach <head>....</head> unverändert in den Bereich einfügen.
Die Darstellung auf der Homepage wird mit diesem Einträgen festgelegt: height='140' width='190'
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 bei Click mit der Mouse die Zoom-Größe des Bildes und kann für jedes Bild, wie in der Demo dargestellt, individuell festgelegt werden.
Download Button

Atmosphere

Galaxy
Code für den <HEAD> Bereich
<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">
.Obj4_0 { position: absolute; text-align: center; font-weight: bold; }
.Beschreibung { color: #FFF; background-color: #000; display: none; }
</style>
Code für den <BODY> Bereich
<span class="Obj4_0">
<img src="http://x5forum.home-wiekau.de/wsX5Obj/Obj_IMG/img_1.jpg"
alt="Atmosphere" style="display: none;" id='BildObj4_1' border="0" onMouseOut="zumachen('BildObj4_1');">
<br>
<span id="Beschreibung-BildObj4_1" class="Beschreibung">
Atmosphere
</span>
</span>
<img src="http://x5forum.home-wiekau.de/wsX5Obj/Obj_IMG/img_1.jpg" width="250" height="171" border="0" onClick="aufmachen(400,'BildObj4_1');" style="margin-right: 15px; cursor: pointer;">

<span class="Obj4_0">
<img src="http://x5forum.home-wiekau.de/wsX5Obj/Obj_IMG/img_2.jpg"
alt="Galaxy" style="display: none;" id='BildObj4_2' border="0" onMouseOut="zumachen('BildObj4_2');">
<br>
<span id="Beschreibung-BildObj4_2" class="Beschreibung">
Galaxy
</span>
</span>
<img src="http://x5forum.home-wiekau.de/wsX5Obj/Obj_IMG/img_2.jpg" width="250" height="171" border="0" onClick="aufmachen(500,'BildObj4_2');" style="margin-right: 15px; cursor: pointer;">
Feedbacks zu ""


Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 2 Online
» 525 Heute
» 469 Gestern
» 1760 Woche
» 5711 Monat
» 75532 Jahr
» 322110 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt