Platzsparende Bildauswahl Tutorial - Kostenlose Homepage Tools für deine Homepage auf ntmb.de

Platzsparende Bildauswahl

3187 - ntmb - 23.09.2006 10:23 Uhr - Version: 1 - - verlinken als BB-Code

Dieses Schnipel ermöglicht euch per auswählen des Feldes andere Bilder anzeigen zu lassen, ohne das die Seite neu geladen werden muss

1 2 3 4 5 6 7 8 9 10 11 12 13 <select onchange="document.getElementById('pics').src='http://www.ntmb.de/banner/'+this[this.selectedIndex].value;"> <option value="1.gif">Bild 1</option> <option value="2.gif">Bild 2</option> <option value="3.gif">Bild 3</option> <option value="4.gif">Bild 4</option> <option value="5.gif">Bild 5</option> <option value="6.gif">Bild 6</option> <option value="7.gif">Bild 7</option> <option value="8.gif">Bild 8</option> <option value="9.gif">Bild 9</option> <option value="10.gif">Bild 10</option> </select><br> <img id="pics" src="http://www.ntmb.de/banner/1.gif" alt="">

Dies dient nur als Beispiel, wie dies aussehen könnte, aber ihr könnt dies halt beliebig anpassen.
http://www.ntmb.de/banner/ - Dies ist bei unseren Beispiel die Zielordneradresse zu den Bildern.

Bei unseren Kombifeld (Auswahlfeld) wird durch auswählen eine andere Zieldatei übergeben. Wenn du zum Beispiel Bild 4 auswählst, dann wird durch den Javascriptcode (onchange="...) bei unseren Bild das src (Quelldatei) zu http://www.ntmb.de/banner/4.gif abgeändert. Dadurch sieht man dann ein anderes Bild.

Ich wünsche euch noch viel Spass mit dem Script

mfg Eugen

Mitglieder-Kommentare

Es sind leider noch keine Einträge vorhanden!

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)