Tutorials

Platzsparende Bildauswahl Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
anzeigen
Platzsparende Bildauswahl


1976 - 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 Smily NR:7

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. :-)