Image sur de l'HTML

Résolu/Fermé

Mehdi-Amg Messages postés 84 Date d'inscription dimanche 22 août 2010 Statut Membre Dernière intervention 10 décembre 2011 - 20 nov. 2011 à 22:11
Mehdi-Amg Messages postés 84 Date d'inscription dimanche 22 août 2010 Statut Membre Dernière intervention 10 décembre 2011 - 21 nov. 2011 à 19:57

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.

A voir également:

Image sur de l'HTML
Image iso - Guide
Editeur html - Télécharger - HTML
Acronis true image - Télécharger - Sauvegarde
Image libre de droit gratuite google - Guide
Br html ✓ - Forum Webmastering

8 réponses

Réponse 1 / 8

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
21 nov. 2011 à 13:02

<!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.

Réponse 2 / 8

vordano Messages postés 1682 Date d'inscription mardi 12 juillet 2011 Statut Membre Dernière intervention 20 juillet 2012 316
21 nov. 2011 à 13:23

il suffit de rajouter <img src="lien de l'image">nom de l'image</img>a l'interieur des <a href="....">...</a>

Réponse 3 / 8

vordano Messages postés 1682 Date d'inscription mardi 12 juillet 2011 Statut Membre Dernière intervention 20 juillet 2012 316
21 nov. 2011 à 16:59

tu tape quoi pour l'ajouter ?

Réponse 4 / 8

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 21/11/2011 à 18:07

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. ?

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

Posez votre question

Réponse 5 / 8

Mehdi-Amg Messages postés 84 Date d'inscription dimanche 22 août 2010 Statut Membre Dernière intervention 10 décembre 2011 8
21 nov. 2011 à 13:20

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

Réponse 6 / 8

Mehdi-Amg Messages postés 84 Date d'inscription dimanche 22 août 2010 Statut Membre Dernière intervention 10 décembre 2011 8
21 nov. 2011 à 16:54

J'ai essayer de rajouter ce code mais sans succès. Merci de m'avoir répondus

Réponse 7 / 8

Mehdi-Amg Messages postés 84 Date d'inscription dimanche 22 août 2010 Statut Membre Dernière intervention 10 décembre 2011 8
21 nov. 2011 à 19:54

Franchement ? Vous etes les meilleurs ;). On me dit souvent que je suis un flemmard. Merci pour vos reponse aussi precise

Réponse 8 / 8

Mehdi-Amg Messages postés 84 Date d'inscription dimanche 22 août 2010 Statut Membre Dernière intervention 10 décembre 2011 8
21 nov. 2011 à 19:57

Ce post à été résolut par m'élite de ce FORUM ;)

Discussions similaires

sortir des réseaux sociaux

Comment enlever le rouge sur la photo svp ?

Dechiffrer une image caché

Retrouver moi l'original

image ?