Image Expansion

Scripte > Bildobjekte

Bildobjekte durch Klick hinzufügen/ergänzen

Hier expandieren die Bilder. Ein Bild wird auf der Homepage dargestellt und durch einen Klick auf das Plus-Icon fügt sich ein weiteres Bild dazu.

So kann man sehr gut einen Arbeitsablauf oder eine Bildanweisung darstellen.

Die Darstellung auf der Homepage wird mit diesem Einträgen festgelegt: height='140' width='190'

Werden die Abmessungen verändert, müssen auch die anderen Angaben im Script entsprechend angepasst werden.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HTML-Code in den in den BODY-Bereich <body>...</body> der ausführenden Seite an gewünschter Stelle einfügen und Bilder gemäß Vorlage einfach nur austauschen.

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

x runter geladen!

Code für den <BODY> Bereich

function plus1() {

document.images.Obj62_1.src="wsX5Obj/Obj62_0/icon_collapse.png";

document.getElementById("scriptObj62_1").href = "javascript:minus1();";
document.getElementById("mehr1").style.display='inline';

}
function minus1() {

document.images.Obj62_1.src="wsX5Obj/Obj62_0/icon_expand.png";
document.getElementById("scriptObj62_1").href = "javascript:plus1();";
document.getElementById("mehr1").style.display='none';

}
function plus2() {

document.images.Obj62_2.src="wsX5Obj/Obj62_0/icon_collapse.png";
document.getElementById("scriptObj62_2").href = "javascript:minus2();";
document.getElementById("mehr2").style.display='inline';

}
function minus2() {

document.images.Obj62_2.src="wsX5Obj/Obj62_0/icon_expand.png";
document.getElementById("scriptObj62_2").href = "javascript:plus2();";
document.getElementById("mehr2").style.display='none';

}
function plus3() {

document.images.Obj62_3.src="wsX5Obj/Obj62_0/icon_collapse.png";
document.getElementById("scriptObj62_3").href = "javascript:minus3();";
document.getElementById("mehr3").style.display='inline';

}
function minus3() {

document.images.Obj62_3.src="wsX5Obj/Obj62_0/icon_expand.png";
document.getElementById("scriptObj62_3").href = "javascript:plus3();";
document.getElementById("mehr3").style.display='none';

}

</script>

<div>

<img alt="Atmosphere" src="wsX5Obj/Obj62_0/img_1.jpg" width='185' height='140' border='0'>
<a href="javascript:plus1();" id="scriptObj62_1">
<img alt="Icon Expand" src="wsX5Obj/Obj62_0/icon_expand.png" name="Obj62_1" border=0></a>
<span style="display: none" id=mehr1>
<img alt="Galaxy" src="wsX5Obj/Obj62_0/img_2.jpg" width='185' height='140' border='0'>
<a href="javascript:plus2();" id="scriptObj62_2">
<img alt="Icon Expand" src="wsX5Obj/Obj62_0/icon_expand.png" name="Obj62_2" border=0></a>
</span>
<span style="display: none" id=mehr2>
<img alt="Sky" src="wsX5Obj/Obj62_0/img_3.jpg" width='185' height='140' border='0'>
<a href="javascript:plus3();" id="scriptObj62_3">
<img alt="Icon Expand" src="wsX5Obj/Obj62_0/icon_expand.png" name="Obj62_3" border=0></a>
</span>
<span style="display: none" id=mehr3>
<img alt="Satellite" src="wsX5Obj/Obj62_0/img_4.jpg" width='185' height='140' border='0'>
</span>

</div>

Nach dem <BODY> Tag

Feedbacks zu ""

Kein Kommentar

Vielen Dank für Dein Feedback.