0
votes

Comment puis-je stocker une source d'image dans un tableau?

J'essaie de le faire pour que lorsque je clique sur l'image, une autre image apparaîtra sur la même page mais à partir de maintenant quand je clique sur l'image, cela ne me donne que le lien photo au lieu de me donner le image.

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="output"></p>
   
<img id="ima1" src="https://i.imgur.com/pe18NpF.jpg" style="width:150px">
<div id="image1"></div>
<script>
var images = [
    'https://i.imgur.com/xwZRPaT.jpg'
];

document.getElementById("ima1").addEventListener("click", showPic4);
function showPic4() {
document.getElementById("image1").innerHTML = images[0];
}

</script>

</body>
</html>

javascript arrays image addeventlistener

0 commentaires

3 Réponses :

0
votes

Dans votre exemple, vous n'avez que la chaîne de texte. Vous devez cibler un modifier> et modifier l'attribut src code> ou créer un nouveau code>. J'ai fait la deuxième option.

Il y a beaucoup de façons de faire cela et beaucoup de différend sur quelle manière sont les meilleures. p>

p>



<!DOCTYPE html>
<html>

<head>
  <style>

  </style>
</head>

<body>

  <h2>JavaScript Arrays</h2>

  <p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

  <p id="output"></p>

  <img id="ima1" src="https://i.imgur.com/pe18NpF.jpg" style="width:150px">
  <div id="image1"></div>
  <script>
  </script>

</body>

</html>

1 commentaires

Hé, merci pour l'aide, c'était une solution simple et rapide @John, existe-t-il un moyen de fixer du style CSS à la fin des images ""; Partie, je veux ajouter une bordure / contour à l'image.

1
votes

Source d'image (lien) doit être associé à sa balise IMG à fonctionner avec innerhtml code> Ici SRCDATA CODE> HOLDS IMG ELEMENT:

document.getElementById("ima1").addEventListener("click", showPic4);
function showPic4() {
   var srcdata="<img id='ima1'  src="+images[0]+"  style='width:150px'>";
   document.getElementById("image1").innerHTML = srcdata;
}

0 commentaires

2
votes

Le premier problème avec votre JavaScript est dans cette ligne ici:

<img id="img1" src="https://large-type.com/twitter-card.png?v2" style='width:150px'>
<img id="img2" style='width:150px'></img>
<script>
    var images = [
        'https://images.megapixl.com/5692/56920966.jpg'
    ];

    document.getElementById("img1").addEventListener("click", showPic);
    
    function showPic() {
        document.getElementById("img2").setAttribute('src', images[0]);
    }
</script>

0 commentaires