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!
Vollständige Version anzeigen: Erstellung einer Seite mit Schieberegler
was genau meinst du mit schieberegler? und wo sollen die bilder zu sehen sein? kannste evtl mal ne skizze machen?
Hallo,
Danke für deine Antwort.
Ich meine in etwa sowas:
Also ich möchte den Regler verschieben und, je nach Stellung, ändert sich das Bild oben drüber.
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.
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:
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
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
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:
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
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!
na das "Ergebnis" würde dann schon auch interessieren
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>
<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>