javascript onclick l'image ne fonctionnera pas

Je veux cliquer sur une image et qu'il se transforme en une autre, mais il ne fonctionnera pas, i utilisé le code de w3schools.com mais il ne fonctionnera pas non plusjavascript onclick l'image ne fonctionnera pas

c'est le code:

<!DOCTYPE html> 
<html> 
<body> 

<img id="myImage" onclick="changeImage()" src="img/checkoff.png"> 

<script> 
    function changeImage() { 
     var image = document.getElementById('myImage'); 
     if (image.src.match("checkon")) { 
      image.src = "checkoff.png"; 
     } else { 
      image.src = "checkon.png"; 
     } 
    } 
</script> 

</body> 
</html>

Source

2017-10-09 Daan

Avez-vous reçu des erreurs? –

dans les instructions if/else, vous devez ajouter le dossier au nom de l'image. 'image.src = 'img/checkoff.png'' et' image.src =' img.checkon.png'' –

Il ya beaucoup de modifications nécessaires pour le faire fonctionner – iamsankalp89

il y a un problème dans votre code

ici vous utilisez uniquement le nom du fichier d'image avec l'extension, vous devez donner également un chemin de fichier relatif de l'image: comme celui-ci

function changeImage() { 
    var image = document.getElementById('myImage'); 
    if (image.src.match("checkon")) { 
     image.src = "img/checkoff.png"; 
    } else { 
     image.src = "img/checkon.png"; 
    } 
}

Ici, vous pouvez vérifier cet exemple.

Cela fonctionne bien.

Espérons que cela vous aide

function changeImage() { 
 
     var image = document.getElementById('myImage'); 
 
     if (image.src.match("generic-image-placeholder")) { 
 
      image.src = "https://cdn.noths-static.com/system/product_images/images/001/037/649/original_set-of-eight-white-heart-name-place-holders.jpg"; 
 
     } else { 
 
      image.src = "https://www.webpagefx.com/blog/images/cdn.designinstruct.com/files/582-how-to-image-placeholders/generic-image-placeholder.png"; 
 
     } 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<img id="myImage" onclick="changeImage()" src="https://cdn.noths-static.com/system/product_images/images/001/037/649/original_set-of-eight-white-heart-name-place-holders.jpg"> 
 

 
</body> 
 
</html>

Source

2017-10-09 11:10:00

Essayez ci-dessous code fonctionne

<img id="myImage" onclick="changeImage()" src="http://fakeimg.pl/300/"> 

<script> 
function changeImage() { 
    var image = document.getElementById('myImage'); 
    if (image.src.match("http://fakeimg.pl/250x100/")) { 
    image.src = "http://fakeimg.pl/300/"; 
    } else { 
    image.src = "http://fakeimg.pl/250x100/"; 
    } 
} 
</script>

Click Here to see jsFiddle Demo

Votre code s'il vous plaît chemin changer quand cliquez sur l'image

<script> 
    function changeImage() { 
     var image = document.getElementById('myImage'); 
     if (image.src.match("checkon.png")) { 
      image.src = "img/checkoff.png"; 
     } else { 
      image.src = "img/checkon.png"; 
     } 
    } 
</script>

Source

2017-10-09 11:11:37

-2

Le chemin de l'image n'est pas correct dans votre code. S'il vous plaît mettre à jour comme ci-dessous:

<script> 
function changeImage() { 
var image = document.getElementById('myImage'); 
if (image.src.match("checkon")) { 
image.src = "img/checkoff.png"; 
} else { 
image.src = "img/checkon.png"; 
} 
} 
</script>

Source

2017-10-09 11:22:34

javascript onclick l'image ne fonctionnera pas

Répondre

Questions connexes