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