Pb pour afficher nom image

Pb pour afficher nom image - HTML/CSS - Programmation

Marsh Posté le 14-05-2007 à 17:25:17    

Salut
 
Je suis en train de faire une gallerie d'image avec un slide.
Quand on clic sur la vignette, l'image s'affiche en grand au centre.
Mais je bug pour afficher le nom de l'image dessous  :fou:  
J'ai pour l'instant un système qui me permet de dire que c'est l'image 1/11 .... mais je préfererai un script où s'affiche le nom de l'image alt"..."
 
C'est visible ici :http://www.prikosnovenie.com/slider.htm
 
 
Voilà le code pour le défilement de l'image:
 

Code :
  1. <script language="javascript">
  3. var Timer;
  4. var Pas = 3; // vitesse défilement texte
  5. var Img = 1; // le numéro de l'image à afficher
  6. var End = 11; // le numéro de la dernière image
  8. function moveLayer(Sens)
  9. {
  10. if(document.getElementById)
  11.      Objet = document.getElementById("Contenu" );
  12. else
  13.      Objet = document.all["Contenu"];
  14. if(parseInt(Objet.style.top) + (Pas*Sens) > 0)
  15.      Objet.style.top = "0px";
  16. else
  17.      Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
  18. Timer = setTimeout("moveLayer(" + Sens + " );", 50);
  19. }
  20. </script>


 
 
 
 
 
 
Et voilà le body:
 

Code :
  1. <div id="Support" style="position:relative;width:100;height:315px;top:70px;overflow:hidden">
  2.     <div id="Contenu" style="position:absolute;width:100;height:315px;left:765px;top:0px">
  3.    
  4.     <p><img src="http://www.prikosnovenie.com/Galeries/1_mini.jpg" alt="Le titre de la photo 1" width="80" height="60" onclick="document.images['vue'].src='http://www.prikosnovenie.com/Galeries/1.jpg'; document.images['compteur'].src='http://www.prikosnovenie.com/Galeries/1sur11.gif';" style="cursor:pointer"></p>
  5.     <p><img src="http://www.prikosnovenie.com/Galeries/2_mini.jpg" alt="Le titre de la photo 2" width="80" height="60" onclick="document.images['vue'].src='http://www.prikosnovenie.com/Galeries/2.jpg'; document.images['compteur'].src='http://www.prikosnovenie.com/Galeries/2sur11.gif';" style="cursor:pointer"></p>
  6.     <p><img src="http://www.prikosnovenie.com/Galeries/3_mini.jpg" alt="Le titre de la photo 3" width="80" height="60" onclick="document.images['vue'].src='http://www.prikosnovenie.com/Galeries/3.jpg'; document.images['compteur'].src='http://www.prikosnovenie.com/Galeries/3sur11.gif';" style="cursor:pointer"></p>
  7.     <p><img src="http://www.prikosnovenie.com/Galeries/4_mini.jpg" width="80" height="60" onclick="document.images['vue'].src='http://www.prikosnovenie.com/Galeries/4.jpg'; document.images['compteur'].src='http://www.prikosnovenie.com/Galeries/4sur11.gif';" style="cursor:pointer"></p>
  8.     <p><img src="http://www.prikosnovenie.com/Galeries/5_mini.jpg" width="80" height="60" onclick="document.images['vue'].src='http://www.prikosnovenie.com/Galeries/5.jpg'; document.images['compteur'].src='http://www.prikosnovenie.com/Galeries/5sur11.gif';" style="cursor:pointer"></p>
  9.     <p><img src="http://www.prikosnovenie.com/Galeries/6_mini.jpg" width="80" height="60" onclick="document.images['vue'].src='http://www.prikosnovenie.com/Galeries/6.jpg'; document.images['compteur'].src='http://www.prikosnovenie.com/Galeries/6sur11.gif';" style="cursor:pointer"></p>
  10.     <p><img src="http://www.prikosnovenie.com/Galeries/7_mini.jpg" width="80" height="60" onclick="document.images['vue'].src='http://www.prikosnovenie.com/Galeries/7.jpg'; document.images['compteur'].src='http://www.prikosnovenie.com/Galeries/7sur11.gif';" style="cursor:pointer"></p>
  11.     <p><img src="http://www.prikosnovenie.com/Galeries/8_mini.jpg" width="80" height="60" onclick="document.images['vue'].src='http://www.prikosnovenie.com/Galeries/8.jpg'; document.images['compteur'].src='http://www.prikosnovenie.com/Galeries/8sur11.gif';" style="cursor:pointer"></p>
  12.     <p><img src="http://www.prikosnovenie.com/Galeries/9_mini.jpg" width="80" height="60" onclick="document.images['vue'].src='http://www.prikosnovenie.com/Galeries/9.jpg'; document.images['compteur'].src='http://www.prikosnovenie.com/Galeries/9sur11.gif';" style="cursor:pointer"></p>
  13.     <p><img src="http://www.prikosnovenie.com/Galeries/10_mini.gif" width="80" height="60" onclick="document.images['vue'].src='http://www.prikosnovenie.com/Galeries/10.gif'; document.images['compteur'].src='http://www.prikosnovenie.com/Galeries/10sur11.gif';" style="cursor:pointer"></p>
  14.     <p><img src="http://www.prikosnovenie.com/Galeries/11_mini.jpg" width="80" height="60" onclick="document.images['vue'].src='http://www.prikosnovenie.com/Galeries/11.jpg'; document.images['compteur'].src='http://www.prikosnovenie.com/Galeries/11sur11.gif';" style="cursor:pointer"></p>
  15.   </div>
  16. </div>
  18.     <div id="Layer1" style="position:absolute; left:792px; top:28px; width:37px; height:33px; z-index:1"><img src="http://www.prikosnovenie.com/Galeries/precedent.png" width="30" height="30" href="" onmouseover="javascript:moveLayer(1);" onmouseout="javascript:clearTimeout(Timer);" style="cursor:pointer"></div>
  19.     <div id="Layer2" style="position:absolute; left:795px; top:441px; width:41px; height:34px; z-index:2"><img src="http://www.prikosnovenie.com/Galeries/suivant.png" width="30" height="30" href="" onmouseover="javascript:moveLayer(-1);" onmouseout="javascript:clearTimeout(Timer);" style="cursor:pointer"></div>
  21.     <div id="Layer3" style="position:absolute; left:301px; top:97px; width:358px; height:305px; z-index:3"><img alt="title" src="http://www.prikosnovenie.com/Galeries/1.jpg" name=vue width="400" height="300"></div>
  23.     <div id="Layer4" style="position:absolute; left:460px; top:411px; width:87px; height:29px; z-index:4"><img alt="" src="http://www.prikosnovenie.com/Galeries/home.png" name=compteur width="30" height="30"></div>


 
 
Merci  :jap:


Message édité par viruss le 16-05-2007 à 10:12:49
Reply

Marsh Posté le 14-05-2007 à 17:25:17   

Reply

Marsh Posté le 15-05-2007 à 23:37:26    

balises CODE


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 16-05-2007 à 10:13:27    

alors une petite idée SVP  :)

Reply

Marsh Posté le 16-05-2007 à 11:54:37    

Gros défaut à ton systéme actuel : c'est une image qui indique le numéro de l'image et pas du texte. Ca n'a aucun intéret d'utiliser une image pour ça : c'est plus lourd, ca ne donne aucune information suplémentaire, si tu rajoutes ou suprime une image alors t'es obligé de modifier toutes tes images pour que le texte reste le bon, ca va te prendre une place folle sur le disque (imagine le nombre de fichiers pour aller de "1 sur 1" à "115 sur 115" ) ...
 
Sinon, rien dans ton code ne cherche à utiliser l'attribut "alt" des image, donc normal qu'il ne soit pas affiché. Dis nous donc ce qui te bloque et on te donnera des pistes.

Reply

Marsh Posté le 16-05-2007 à 12:42:06    

merci a toi omega2 d'avoir regarder.  
Oui je sais bien que le système avec les images n'est pas pratique.  
Je l'ai mis car justement j'ai pas trouvé de code qui pourrait réutiliser les attributs alt" " de l'image. Quelqu'un connait-il un bout de code qui utiliserait justement l'attribut " alt " des images?
 
Merki  :)

Reply

Sujets relatifs:

Leave a Replay

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