Image sur de l'HTML

Résolu
Mehdi-Amg Messages postés 95 Statut Membre -  
Mehdi-Amg Messages postés 95 Statut Membre -
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

Réponse 1 / 8
Lord Zero Messages postés 487 Statut Membre 115
  
<!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
Réponse 2 / 8
vordano Messages postés 1981 Statut Membre 316
 
il suffit de rajouter <img src="lien de l'image">nom de l'image</img>a l'interieur des <a href="....">...</a>
1
Réponse 3 / 8
vordano Messages postés 1981 Statut Membre 316
 
tu tape quoi pour l'ajouter ?
1
Réponse 4 / 8
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
Mehdi-Amg Messages postés 95 Statut Membre 11
 
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
Réponse 6 / 8
Mehdi-Amg Messages postés 95 Statut Membre 11
 
J'ai essayer de rajouter ce code mais sans succès. Merci de m'avoir répondus
0
Réponse 7 / 8
Mehdi-Amg Messages postés 95 Statut Membre 11
 
Franchement ? Vous etes les meilleurs ;). On me dit souvent que je suis un flemmard. Merci pour vos reponse aussi precise
0
Réponse 8 / 8
Mehdi-Amg Messages postés 95 Statut Membre 11
 
Ce post à été résolut par m'élite de ce FORUM ;)
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses
image ?
youness -
Utilisateur anonyme -

11 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses