diedVIPs

html knowhow

Bildanzeige mit Schieberegler










Bildanzeige mit Schieberegler

Mit diesem Schieberegler können Sie die zuvor eingegebenen Bilder anzeigen und gleichzeitig die entsprechende Nummer dazu ausgeben lassen.

So sieht´s aus



1


Quellcode
<html>
<head>

<style type="text/css">
img {width:80%;height:auto;}
</style>
<head>

<body >
<p><input type="range" min="1" max="5" value="1" step="1" onchange="showValue(this.value)"/></p>
<p><img src="../Bilder/Werbung/B-Dinner.jpg" id="range" alt=""/><br/><br/>
<span style="font-size:x-large;font-weight:bold;color:maroon" id="number">1</span></p>

<script>
function showValue(newValue) {
var bild="1.jpg";
switch (newValue) {
case '1': bild='1.jpg'; break;
case '2': bild='2.jpg'; break;
case '3': bild='3.jpg'; break;
case '4': bild='4.jpg'; break;
case '5': bild='5.jpg'; break;
}
document.getElementById("range").src=bild;
document.getElementById("number").innerText = newValue;
}
</script>

</body>
</html>



Rotate







Kontakt    Datenschutz    Impressum