Image sur de l'HTML

Résolu
Mehdi-Amg -  
Bonjour,
Alors je vais essayer de vous expliquez clairement. J'ai fais un site internet mais je voudrais insérer des images sur mon sites et je voudrais aussi que à chaque fois que quelqu'un clic sur une image elle change pour laisser place à une autre images. C'est une sorte de sondage entre deux animaux par exemple et à chaque fois que je clique sur un animal les deux photos changent. Pour laisser place à deux autre animaux et ainsi de suite. J'espère que vous m'avez bien compris.
Merci d'avance
PS : Je suis sur mac mais je pense pas que ça change grand chose à part pour le chemin des images.

8 réponses

  1.  Lord Zero 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>
<script language="javascript" type="text/javascript">
function change() {
document.getElementById('img1').src="http://thumbs.dreamstime.com/thumblarge_390/123998888688nUsD.jpg";
document.getElementById('img2').src="http://thumbs.dreamstime.com/thumblarge_456/12592906720fFN4W.jpg";
}
function change2() {
document.getElementById('img1').src="http://i-cms.linternaute.com/image_cms/original/362925-ils-sont-nes-en-2008.jpg";
document.getElementById('img2').src="http://thumbs.dreamstime.com/thumblarge_214/1196460248Q082R6.jpg";
}
function change3() {
document.getElementById('img1').src="http://madisondream.m.a.pic.centerblog.net/o/f53e3cfd.jpg";
document.getElementById('img2').src="https://www.meuble-decoration-pays.com/images/peinture-elephant-artisanat-indonesien-64962.jpg";
}

</script>
</head>

<body>
<div style="width:400px;height:400px"><img id="img1" alt="" src=""/></div>
<div style="width:400px;height:400px;position:absolute;top:15px;margin-left:410px"><img id="img2" alt="" src=""/></div>
<br/>
<a href="#" onclick="change()">tigre</a>
<a href="#" onclick="change2()">zebre</a>
<a href="#" onclick="change3()">eléphant</a>
</body>

</html>


    A voir si c'est de ça que tu parle.
    1
    1. vordano
      il suffit de rajouter <img src="lien de l'image">nom de l'image</img>a l'interieur des <a href="....">...</a>
      1
      1. vordano
        tu tape quoi pour l'ajouter ?
        1
        1. RAD ZONE Contributeur
          salut

          Mehdi-Amg

          fais un petit effort quand meme !! ;-))

          Lord Zero ta donne 90% de la reponse , et

          vordano les 10% manquant !

          moi j ai mis un peu de css et surtout des images de la couleur du background dans les 2 div ,

          plutot que <img id="img1" alt="" src=""/> , pas tres propre :-))

          voila la synthese des 2 ! 

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title> 
      Untitled 2 
    </title> 
    <script language="javascript" type="text/javascript"> 
//<![CDATA[ 
    function change() { 
    document.getElementById('img1').src="http://thumbs.dreamstime.com/thumblarge_390/123998888688nUsD.jpg"; 
    document.getElementById('img2').src="http://thumbs.dreamstime.com/thumblarge_456/12592906720fFN4W.jpg"; 
    } 
    function change2() { 
    document.getElementById('img1').src="http://www.linternaute.com/nature-animaux/magazine/dossier/ils-sont-nes-en-2008/image/bebe-zebre-grant-362925.jpg"; 
    document.getElementById('img2').src="http://thumbs.dreamstime.com/thumblarge_214/1196460248Q082R6.jpg"; 
    } 
    function change3() { 
    document.getElementById('img1').src="http://madisondream.m.a.pic.centerblog.net/o/f53e3cfd.jpg"; 
    document.getElementById('img2').src="https://www.meuble-decoration-pays.com/images/peinture-elephant-artisanat-indonesien-64962.jpg"; 
    } 

    //]]> 
    </script> 
    <style type="text/css"> 
    /*<![CDATA[*/ 
    div.c2{ 
      width:400px; 
      height:400px; 
      position:absolute; 
      top:15px; 
      margin-left:410px; 
    } 

    div.c1{ 
      width:400px; 
      height:400px; 
    } 
    /*]]>*/ 
    </style> 
  </head> 
  <body> 
    <div class="c1"> 
      <img id="img1" alt="img" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS9S-Opbq02dN-eudWJ6lFQYgOUkoCcxInEUZpn1PeAd9owmKRcSLW3GA" name="img1" /> 
    </div> 
    <div class="c2"> 
      <img id="img2" alt="img" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS9S-Opbq02dN-eudWJ6lFQYgOUkoCcxInEUZpn1PeAd9owmKRcSLW3GA" name="img2" /> 
    </div> 
    <br /> 
    <a href="#" onclick="change()"><img src="http://thumbs.dreamstime.com/thumblarge_456/12592906720fFN4W.jpg" width="100" height="100" alt="tigre" /></a> 
    <a href="#" onclick="change2()"><img src="http://thumbs.dreamstime.com/thumblarge_214/1196460248Q082R6.jpg" width="100" height="100" alt="zebre" /></a> 
    <a href="#" onclick="change3()"><img src="https://www.meuble-decoration-pays.com/images/peinture-elephant-artisanat-indonesien-64962.jpg" width="100" height="100" alt="elephant" /></a> 
  </body> 
</html>


          ? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
          1
          2. Mehdi-Amg Auteur
            C'est presque ca, merci de ta reponse bien precise. Mais je voudrais que les internaute puisse cliquer sur une image et non pas sur du texte afin de choisir la meilleur. Et quand ils cliquent sur l'image deux autres apparaissent pour faire un autres choix
            0
            1. Mehdi-Amg Auteur
              J'ai essayer de rajouter ce code mais sans succès. Merci de m'avoir répondus
              0
              1. Mehdi-Amg Auteur
                Franchement ? Vous etes les meilleurs ;). On me dit souvent que je suis un flemmard. Merci pour vos reponse aussi precise
                0
                1. Mehdi-Amg Auteur
                  Ce post à été résolut par m'élite de ce FORUM ;)
                  0

                  Discussions similaires

                  Retrouver l'image originale d'une photo modifiée
                  Raven

                  10 réponses
                  PIX
                  plart

                  1 réponse