Computer und Technik

Neues Thema erstellen

Erstellung einer Seite mit Schieberegler

Themen Layout: [Standard] · Linear · Outline Thema abonnieren | Thema versenden | Thema drucken


terrorzwerg	07 Jul 2014, 15:27 Antwort #1
1. Schein Punkte: 36 seit: 08.06.2010	Hallo, ich hoffe mir kann hier jemand helfen. Ich möchte eine ganz einfache html etc. Seite erstellen. Diese soll einen Schieberegler mit 8 Stufen enthalten & hinter jeder Stufe soll sich ein Bild verbergen. Das Bild soll oberhalb dann jeweils angezeigt werden. Ich habe bisher nur Fotogalerien mit "Slider" gefunden. Die Schieberegler konnten bisher nur Zahlen in bestimmter Schrittweite anzeigen. Viele Dank für eure Hilfe!


mcnesium	07 Jul 2014, 15:59 Antwort #2
parse error Punkte: 13746 seit: 27.05.2003	was genau meinst du mit schieberegler? und wo sollen die bilder zu sehen sein? kannste evtl mal ne skizze machen?


terrorzwerg	07 Jul 2014, 16:56 Antwort #3
1. Schein Punkte: 36 seit: 08.06.2010	Hallo, Danke für deine Antwort. Ich meine in etwa sowas: Zum Vergrößern klicken: Link zum Bild in voller Größe Also ich möchte den Regler verschieben und, je nach Stellung, ändert sich das Bild oben drüber.


mcnesium	08 Jul 2014, 09:18 Antwort #4
parse error Punkte: 13746 seit: 27.05.2003	na da kannste zb den jquery ui slider nehmen. daneben legste die bilder alle ein div und blendest per css erstmal alle aus. dann nimmste den wert vom slider und blendest nur das bild ein, das den jeweiligen wert hat. so mal grob: CODE HTML: <img id="i1"/> <img id="i2"/> <img id="i3"/> … CSS: img {display:none;} JS: $('#myslider').on('change',function(key,value){ $('img#i'+value).show(); }); musste natürlich dem slider erstmal beibringen, ganze zahlen auszuspucken oder so, aber das steht ja alles in der api doku. da gibs auch noch andere beispiele, da findste schon was


terrorzwerg	08 Jul 2014, 09:21 Antwort #5
1. Schein Punkte: 36 seit: 08.06.2010	Zitat(mcnesium @ 08 Jul 2014, 09:18) na da kannste zb den jquery ui slider nehmen. daneben legste die bilder alle ein div und blendest per css erstmal alle aus. dann nimmste den wert vom slider und blendest nur das bild ein, das den jeweiligen wert hat. so mal grob: CODE HTML: <img id="i1"/> <img id="i2"/> <img id="i3"/> … CSS: img {display:none;} JS: $('#myslider').on('change',function(key,value){ $('img#i'+value).show(); }); musste natürlich dem slider erstmal beibringen, ganze zahlen auszuspucken oder so, aber das steht ja alles in der api doku. da gibs auch noch andere beispiele, da findste schon was Dankeschön! das hat funktioniert!


Padex	08 Jul 2014, 11:02 Antwort #6
Ex-Außenminister Punkte: 3861 seit: 27.01.2005	na das "Ergebnis" würde dann schon auch interessieren -------------------- Jetzt Abstimmen!!! Verteilung "Mitglied in einem Studentenclub und Studierende" der eXma User?


terrorzwerg	08 Jul 2014, 13:29 Antwort #7
1. Schein Punkte: 36 seit: 08.06.2010	Ich habe das Insgesamt dann noch bisschen anders gelöst: CODE <html> <body> <center> 1 <p><img src="./R250ds12/001001001.jpg" id="range" alt=""></p> <script type="text/javascript"> function showValue(newValue) { var bild="./R250ds12/001001001.jpg"; switch (newValue) { case '1': bild='./R250ds12/001001001.jpg'; break; case '2': bild='./R250ds12/001002001.jpg'; break; case '3': bild='./R250ds12/001003001.jpg'; break; case '4': bild='./R250ds12/001004001.jpg'; break; case '5': bild='./R250ds12/001005001.jpg'; break; case '6': bild='./R250ds12/001006001.jpg'; break; case '7': bild='./R250ds12/001007001.jpg'; break; case '8': bild='./R250ds12/001008001.jpg'; break; } document.getElementById("range").src=bild; } </script> <input type="range" min="1" max="8" value="1" step="1" onchange="showValue(this.value)" /><br> <img src="skala.png" width="165"> </center> <div align="right"> <a href="2.html">weiter</a> </div> </body> </html>

2 Nutzer liest/lesen dieses Thema (2 Gäste)

0 Mitglieder:

Neues Thema erstellen