Image bouton html JavaScript

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Image bouton html JavaScript

gdolt

Bonjour, sur mon site web j’aimerai faire un bouton avec deux image à chaque fois que je clique sur la première image on passe à la seconde. Ampoule allumée/ ampoule éteinte.
Quelqu’un pourrait m’orienter sur le code svp?

Merci

Publicité

rat de combat

attention rongeur méchant!

Tu rajoutes un id="" à ton image, un event onclick et tu utilises getElementById(id) pour modifier l'attribut src de l'image.
if(src==image1)
src=image2
else
src=image1

gdolt

Merci pour la réponse. Je cherche n’arrive pas à l’écrire correctement. Peux-tu m’aider stp? J’apprends

gdolt

<img src="image/Lampeoff.png" style="height:64px; width: 64px" class="Lampeoff";"/>
<img src="image/Lampeon.png" style="height:64px; width: 64px" class="Lampeon";"/>

<script type="text/javascript">

Lampeoff = document.getElementById('off');
Lampeon = document.getElementById('on');
if(src==lampeoff;
src=lampeon;
else;
scr=lampeoff;

</script>

je suis perdu...

Message édité par gdolt le 24-08-2018 à 18:23:55

gdolt

bonjour, j'ai ce code mais j'arrive pas à faire disparaitre l'image lampe_ext_on quand j'appui sur le bouton, par contre la seconde image apparait bien

Quelqu'un sait pourquoi.?
merci

Code :

<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', function()
{
var button = document.getElementById('bouton');
var appears = document.querySelector('.test');
var bool =1;
button.addEventListener('click', function(onClickButton)
{
appears.classList.toggle('hide');
if(bool=== 0)
{
button.innerHTML = "Eteindre";
bool=1;
}
else
{
button.innerHTML = "Allumer";
bool = 0;
}
});
});
</script>
<style>
.hide
{
display: none
}
</style>
<title>test2</title>
</head>
<body>
<div>
<img src="image/Lampe_ext_on.png">
<img class="test hide" src="image/Lampe_ext_off.png">
</div>
<button id="bouton"> voir plus</button>
</body>
</html>

Message édité par gdolt le 24-08-2018 à 21:09:24

rat de combat

attention rongeur méchant!

Tu veux bien mettre ton code entre balises et faire un minimum attention à la mise en page?

gdolt

excuse moi je débute pardon

rat de combat

attention rongeur méchant!

Pour ce code là je peux pas te dire, je connais mal le JS, désolé... Faut attendre que quelqu'un d'autre passe.

HaiDZ

On en a gros !

Tu t'embête beaucoup j'ai l'impression, si j'ai bien compris, quand tu clique sur un bouton, ça affiche une image, et si tu re clique, ça affiche a nouveau l'image initiale ?

Perso je ferais comme ça :

Code :

<input type="button" id="btn" onClick="Switch()">
<img id="img" src="ampoule_on.jpg">
<script>
function Switch()
{
var Img = document.getElementById('img');
if(Img.src == "ampoule_on.jpg" )
{
Img.src = "ampoule_off.jpeg";
}
else
{
Img.src = "ampoule_on.jpg";
}
}
</script>

Je n'ai pas testé mais ça devrais fonctionner.

PS : n'oublis pas de mettre le chemin complet de l'img partout, même dans le JS (ex : img/ampoule.jpg)

Si ça peut aider :jap:

FORUM HardWare.fr

Programmation

HTML/CSS

Image bouton html JavaScript

Sujets relatifs
comment récupérer une statistique d'affichage d'une image ?	Soucis intégration date dans HTML/JSON
Format HTML Débutant	Soucis avec du code CSS sur HTML.
[HTML/PHP/CSS] Diff de 2 données	[HTML] Formulaire fonctionnel sur navigateur mais bugué sur instagram.
Effet d'assombrissement d'image (WordPress)	Probleme signature html
Bouton skype (code javascript) pas reconnu dans html du site Jimdo
Plus de sujets relatifs à : Image bouton html JavaScript

Page générée en 0.037 secondes