• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Erstellung einer Seite mit Schieberegler und Bilder

T

Terrorzwerg

Neues Mitglied
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.

fxfz289v.jpg


Also ich möchte den Regler verschieben und, je nach Stellung, ändert sich das Bild oben drüber.

Viele Dank für eure Hilfe!
 
Werbung:
ich habe leider keine Bilder eingefügt bekommen, das ist das problem...
Ich konnte nur Min. Zahl und Max. Zahl und Step ändern...

Vollständigkeithalber, das Skript:
Code: 
<html>
<body>
<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
    document.getElementById("range").innerHTML=newValue;
}
</script>
</body>
</html>
 
Werbung:
Ungetestet:
HTML: 
<html>
<body>
<input type="range" min="0" max="5" value="0" step="1" onchange="showValue(this.value)" />
<p><img src="./images/bild1.png" id="range" alt=""></p>

<script type="text/javascript">
function showValue(newValue)
{
    var bild="./images/bild1.png";
   
    switch (newValue)
    {
       case '0': bild='./images/bild1.png'; break;
       case '1': bild='./images/bild2.png'; break;
       case '2': bild='./images/bild3.png'; break;
       case '3': bild='./images/bild4.png'; break;
       case '4': bild='./images/bild5.png'; break;
    }

    document.getElementById("range").src=bild;
}
</script>
</body>
</html>
 
Du musst den value-Wert auswerten und entsprechend dem ermittelten Wert ein Bild an irgendeiner anderen Stelle in deinem HTML-DOM einfügen.
 
bdt600 schrieb:
Ungetestet:
HTML: 
<html>
<body>
<input type="range" min="0" max="5" value="0" step="1" onchange="showValue(this.value)" />
<p><img src="./images/bild1.png" id="range" alt=""></p>

<script type="text/javascript">
function showValue(newValue)
{
    var bild="./images/bild1.png";
  
    switch (newValue)
    {
       case '0': bild='./images/bild1.png'; break;
       case '1': bild='./images/bild2.png'; break;
       case '2': bild='./images/bild3.png'; break;
       case '3': bild='./images/bild4.png'; break;
       case '4': bild='./images/bild5.png'; break;
    }

    document.getElementById("range").src=bild;
}
</script>
</body>
</html>
Zum Vergrößern anklicken....

Hey vielen Dank, das ist genau das, was ich wollte!
Fettes Dankeschön :)
 
Werbung:
Hallo ich bins nochmal.
Nun müsste dazu noch eine Erweiterung rein... also ich möchte, dass es mir die Zahl mit anzeigt und dass sich die Bilder beim Wechsel direkt überblenden. Im Moment muss ich immer auf die Stelle klicken.
Ich möchte bei gedrückter Maustaste beim bewegen des Reglers von Links nach Rechts, dass sich das Bild ändert ist das möglich?
Mein aktueller Quelltext lautet:
HTML: 
<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>

Danke schonmal - ich such mich irgendwie mittlerweile dumm und dusselig...
 
Terrorzwerg schrieb:
Hallo ich bins nochmal.
Nun müsste dazu noch eine Erweiterung rein... also ich möchte, dass es mir die Zahl mit anzeigt und dass sich die Bilder beim Wechsel direkt überblenden. Im Moment muss ich immer auf die Stelle klicken.
Ich möchte bei gedrückter Maustaste beim bewegen des Reglers von Links nach Rechts, dass sich das Bild ändert ist das möglich?
Mein aktueller Quelltext lautet:
HTML: 
<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>

Danke schonmal - ich such mich irgendwie mittlerweile dumm und dusselig...
Zum Vergrößern anklicken....

Statt dem onchange ein oninput.

Was du mit "also ich möchte, dass es mir die Zahl mit anzeigt" meinst, keine Ahnung ;)
 
scbawik schrieb:
Statt dem onchange ein oninput.

Was du mit "also ich möchte, dass es mir die Zahl mit anzeigt" meinst, keine Ahnung ;)
Zum Vergrößern anklicken....

Cool, danke das klappt schonmal :-)

Naja ich möchte zusätzlich zum Bild noch eine Ziffer angezeigt bekommen, auf welcher der Regler steht.
Beispielsweise bei Bild 3 möchte ich unterhalb (oder rechts vom Regler) noch die Zahl 3 angezeigt bekommen.
Ist das möglich?
 
Werbung:
Terrorzwerg schrieb:
Hallo ich bins nochmal.

Danke schonmal - ich such mich irgendwie mittlerweile dumm und dusselig...
Zum Vergrößern anklicken....

Das ist eine mehrteilige Aufgabe. Erstmal benötigt man einen Slider. Den gibt es bereits als fertiges Plugin.
http://jqueryui.com/slider/

Im change() Event des Sliders könnte man festlegen, dass das mit der Zahl korrespondierende Bild geladen wird, also img_1.png, img_2.png, etc. Fading wird darüber erreicht, dass die Opacity des alten Bildes in Zehnerschritten von 1 auf 0 und die des neuen in umgekehrter Richtung gesetzt wird. Zum Glück gibt bietet jQuery auch dafür anpassbare Funktionen wie fadeIn(), fadeOut() und animation().
 
Terrorzwerg schrieb:
Cool, danke das klappt schonmal :)

Naja ich möchte zusätzlich zum Bild noch eine Ziffer angezeigt bekommen, auf welcher der Regler steht.
Beispielsweise bei Bild 3 möchte ich unterhalb (oder rechts vom Regler) noch die Zahl 3 angezeigt bekommen.
Ist das möglich?
Zum Vergrößern anklicken....

In der Funktion "showValue" hast du ja die Variable "newValue". Diese Zahl kannst du ausgeben wo du willst.
Hattest du sogar schon…

Code: 
document.getElementById("range").innerHTML=newValue;
 
Werbung:
Der Code sieht mittlerweile so aus:
Code: 
<html>
<body>
<center>
2
<p><img src="./R250ds8/001009001.jpg" id="range" alt=""></p>
<script type="text/javascript">
function showValue(newValue)
{
    var bild="./R250ds8/001009001.jpg";
  
    switch (newValue)
    {
       case '1': bild='./R250ds8/001009001.jpg'; break;
       case '2': bild='./R250ds8/001010001.jpg'; break;
       case '3': bild='./R250ds8/001011001.jpg'; break;
       case '4': bild='./R250ds8/001012001.jpg'; break;
       case '5': bild='./R250ds8/001013001.jpg'; break;
       case '6': bild='./R250ds8/001014001.jpg'; break;
       case '7': bild='./R250ds8/001015001.jpg'; break;
       case '8': bild='./R250ds8/001016001.jpg'; break;
    }
    document.getElementById("range").src=bild;
}
</script>
<input type="range" min="1" max="8" value="1" step="1" oninput="showValue(this.value)" /><br>
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
    document.getElementById("range").innerHTML=newValue;
}
</script>
</center>
<div align="right">
<a href="3.html">weiter</a>
</div>
</body>
</html>
In diesem Fall geht weder die Bildänderung, noch das hochzählen des Wertes.

Der Fall, wo die Bildänderung funktionierte war:
Code: 
<html>
<body>
<center>
2
<p><img src="./R250ds8/001009001.jpg" id="range" alt=""></p>
<script type="text/javascript">
function showValue(newValue)
{
    var bild="./R250ds8/001009001.jpg";
  
    switch (newValue)
    {
       case '1': bild='./R250ds8/001009001.jpg'; break;
       case '2': bild='./R250ds8/001010001.jpg'; break;
       case '3': bild='./R250ds8/001011001.jpg'; break;
       case '4': bild='./R250ds8/001012001.jpg'; break;
       case '5': bild='./R250ds8/001013001.jpg'; break;
       case '6': bild='./R250ds8/001014001.jpg'; break;
       case '7': bild='./R250ds8/001015001.jpg'; break;
       case '8': bild='./R250ds8/001016001.jpg'; break;
    }
    document.getElementById("range").src=bild;
}
</script>
<input type="range" min="1" max="8" value="1" step="1" oninput="showValue(this.value)" /><br>
</center>
<div align="right">
<a href="3.html">weiter</a>
</div>
</body>
</html>

ich möchte neben dem Regler den Wert des Bildes angezeigt bekommen ... :(

Danke schonmal
 
Im ersten Fall hast Du 2 mal die funktion showValue, das kann nicht gehen. Du weißt ganz offensichtlich überhaupt nicht, was du tust. Mit minimalsten Grundkenntnissen kannst Du dir leicht das Gewünschte aus den hier schon vorhandenen Codeschnipseln zusammenbauen. Aber die musst Du Dir erstmal aneignen, sonst macht das hier keinen Sinn.

http://molily.de/js/
 
Werbung:
hallo
ich habe den code oben genommen und angepasst.
funktioniert soweit auch. nur ich möchte den schieberegler unterhalb der bilder haben. jetzt ist er immer oberhalb
 
obrige frage habe ich selbst hin bekommen
jetzt noch eine:
wie bekomme ich den button vom schieberegler grösser ?
ist doch auf dem handy arg klein
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben