CSS/JS slider pour afficher une image PHP avec paramètre

Version imprimable

10/07/2018, 17h35
loloz3

CSS/JS slider pour afficher une image PHP avec paramètre

Bonjour, :D

Je suis débutant et souhaite faire afficher "dynamiquement" une image (crée en PHP) en utilisant un slider CSS/JS...

Mon image est la suivante : http://loloz3.hd.free.fr/tiralarc/schema2.php?value=0
http://loloz3.hd.free.fr/tiralarc/schema2.php?value=0
"value" peut changer de 0 à 30
avec 30 on à :
http://loloz3.hd.free.fr/tiralarc/schema2.php?value=30

et j'aimerai faire changer la valeur dynamiquement en utilisant un slider comme celui-là :

https://www.w3schools.com/howto/tryi...js_rangeslider

Je suis à votre écoute... es-ce possible en CSS/JS ? et comment faire ?

Merci de votre aide !
10/07/2018, 18h39
Invité

Bonjour,

Pour l'afficher dans une page HTML, il suffit de la mettre dans une balise <img> :

Code:

<img src="http://loloz3.hd.free.fr/tiralarc/schema2.php?value=30"/>

Et là, effectivement, on peut modifier le src via JavaScript.
11/07/2018, 08h18
loloz3

Merci pour ta réponse, afficher une image simplement, je connais... mais c’est la suite qui m’intéresse... l’integrer dans une page avec le slider pour changer la valeur. 😅

Bonjour,

Si on reprend ton lien : https://codepen.io/jreaux62/pen/ejmpGG

Code:

1
2
3
4
5
<div class="slidecontainer">
  <input type="range" min="0" max="30" value="0" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>
<img id="archer" src="http://loloz3.hd.free.fr/tiralarc/schema2.php?value=0"/>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.slidecontainer {
    width: 100%;
}
 
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
 
.slider:hover {
    opacity: 1;
}
 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}
 
.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
let slider = document.getElementById('myRange');
let output = document.getElementById('demo');
let archer = document.getElementById('archer');
let archer_url = 'http://loloz3.hd.free.fr/tiralarc/schema2.php?value=';
output.innerHTML = slider.value;
archer.src = archer_url + slider.value;
 
slider.oninput = function() {
  output.innerHTML = this.value;
  archer.src = archer_url + this.value;
};

11/07/2018, 10h41
loloz3

Génial !

Tu es trop fort ! (j'étais très très loin du résultat !)

MERCI !!!! :D