Aide en html

Aide en html - HTML/CSS - Programmation

Marsh Posté le 23-06-2012 à 14:48:08    

Bonjour,
 
j'aimerais intégrer sur mon site web un cadre de 200px*200px avec dedans : "image1.jpg", puis lorsque y clique dessus "image2.jpg" et lorsqu’on clique sur cette deuxième image "image3.jpg" et enfin, lorsqu'on clique sur cette dernière image, ""image4.jpg" contenant un lien pointant vers un article wikipédia. Je vous prie de m'aider à trouver le code html pouvant arriver à cela.
 
Merci pas avance pour votre aide. :)  
 

Reply

Marsh Posté le 23-06-2012 à 14:48:08   

Reply

Marsh Posté le 28-06-2012 à 13:59:36    

Pour le cadre, à mettre dans ton html :

Code :
  1. <script type="text/javascript"> 
  2. var iNbDefilements = 0; 
  3.  
  4. function ImageCadre() { 
  5.   iNbDefilements++; 
  6.  
  7.   switch(iNbDefilements) { 
  8.     case 1: 
  9.         // Affiche image 2; 
  10.         document.getElementById("MonCadre" ).getElementById("LienCadre" ).href="#"; 
  11.         document.getElementById("MonCadre" ).getElementById("ImageCadre" ).src = "image2.jpg"; 
  12.         break; 
  13.  
  14.      case 2: 
  15.         // Affiche image 3; 
  16.         document.getElementById("MonCadre" ).getElementById("LienCadre" ).href="#"; 
  17.         document.getElementById("MonCadre" ).getElementById("ImageCadre" ).src = "image3.jpg"; 
  18.         break; 
  19.  
  20.       case 3: 
  21.         // Affiche image 4; 
  22.         document.getElementById("MonCadre" ).getElementById("LienCadre" ).href="http://www.wikipedia.fr"; 
  23.         document.getElementById("MonCadre" ).getElementById("ImageCadre" ).src = "image4.jpg"; 
  24.         iNbDefilements = 0; 
  25.         break; 
  26.   } 
  27. } 
  28. </script> 
  29. <div id="MonCadre" class="Cadre" onclick="ImageCadre();"> 
  30.  <a id="LienCadre" href="#"><img id="ImageCadre" src="image1.jpg" title="Cliquer sur l'image pour faire défiler..."  /></a> 
  31. </div>


 
Dans ton css :

Code :
  1. div.Cadre {
  2.   width: 200px;
  3.   height: 200px;
  4.   border: 1px solid #000000;
  5. }
  6.  
  7. div.Cadre a img {
  8.   border: 0;
  9. }


 
En gros, voilà le principe...


Message édité par rufo le 28-06-2012 à 14:00:13

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed