Afficher texte sur une image au passage de la souris

Afficher texte sur une image au passage de la souris - HTML/CSS - Programmation

Marsh Posté le 15-09-2010 à 21:25:33    

Bonsoir,
Je commence tout juste à coder mon portfolio photo, et je souhaiterais, lors du passage de la souris sur la miniature afficher les exifs de ma photo, donc afficher du texte !
Dans mon design j'ai fais quelque chose comme ça:
http://d7.e-loader.net/lXM2OMTAgp.png

 

Sur le lys rouge (en haut) c'est ma miniature "normale"
Et sur la goutte (en bas donc) c'est ma miniature lorsque l'on passe la souris dessus

 

Pour l'instant j'ai réussi à afficher du texte (sous l'image) grâce à un OnMouseOver et à la faire disparaitre avec un OnMouseOut, le tout en bidouillant du code trouver sur je sais plus quel site :D
Je cherche donc comment l'afficher mon texte sur l'image !

 

Voici mon code:

Code :
  1. <script>
  2. function HP_openWindow(theURL,winName,features)
  3. {
  4.   var _W=window.open(theURL,winName,features);
  5.   _W.focus();
  6.       _W.moveTo(50,50);
  7. }
  8. function change_text(newtext,elementid) {
  10. var textid=document.getElementById(elementid);
  12. textid.childNodes[0].nodeValue=newtext;
  14. }
  15. </script>
  17. <DIV style="FLOAT: left;width: 100%;">
  18. <SPAN id=icons>
  19. <A href="mon_image_en_full_size">
  20. <IMG onmouseover="change_text('AFFICHAGE TEXTE','logodescrip');" onmouseout="change_text('','logodescrip');" src="ma_miniature" border=0>
  21. </A>
  22. <DIV id=logodescrip>
  23. &nbsp;
  24. </DIV>
  25. </SPAN>
  26. </DIV>
 


Merci d'avance :)


Message édité par 182gollum le 15-09-2010 à 21:27:38

---------------
Topic Unik Gears 5 - Topic Unik Gears of War 4 - BNet: gollum182#2854
Reply

Marsh Posté le 15-09-2010 à 21:25:33   

Reply

Marsh Posté le 16-09-2010 à 13:10:10    

je ne suis pas sur que ce soit la meilleure solution, mais tu peux utiliser "position:relative" avec un bottom pour faire remonter ton div sur l'image:

 
Code :
  1. <DIV style="height: 40px; position: relative; bottom:40px" id=logodescrip>


Message édité par pataluc le 16-09-2010 à 13:10:26
Reply

Marsh Posté le 16-09-2010 à 13:20:28    

ça marche, génial, merci :D


---------------
Topic Unik Gears 5 - Topic Unik Gears of War 4 - BNet: gollum182#2854
Reply

Sujets relatifs:

Leave a Replay

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