Hover sur une image et du texte en même temps

Hover sur une image et du texte en même temps - HTML/CSS - Programmation

Marsh Posté le 27-05-2010 à 01:40:57    

Salut,
 
L'idée est que j'ai un tableau (1 ligne et 2 colonnes).
Dans la première colonne j'ai une image. Je veux qu'au survol la souris, la bordure change de couleur.
Dans la seconde colonne j'ai du texte. Je veux qu'au survol la souris, le texte change de couleur.
 
Actuellement, l'image et le texte sont indépendants. Donc seul le texte ou l'image réagit au survol de la souris.
J'aimerai que quand je survol un élément, l'autre réagisse également.
C'est possible?
 
Merci

Reply

Marsh Posté le 27-05-2010 à 01:40:57   

Reply

Marsh Posté le 30-05-2010 à 22:54:41    

C'est faisable ou non?
Je peux virer le tableau si besoin...

Reply

Marsh Posté le 31-05-2010 à 10:56:53    

oui
suffit d'appliquer une fonction JS via onmouseover sur ton <tr>


---------------
NewsletTux - outil de mailing list en PHP MySQL
Reply

Marsh Posté le 02-06-2010 à 00:23:43    

NewsletTux a écrit :

oui
suffit d'appliquer une fonction JS via onmouseover sur ton <tr>


OK... Par contre je suis incapable de sortir un javascript qui fonctionne...
Je ne connais pas du tout...
Voilà ce que j'ai essayé de faire :

Code :
  1. <html>
  2. <head>
  3.  
  4.     <style type="text/css">
  5.  
  6.     a {
  7.     font-weight:bold;
  8.     font-family:verdana;
  9.     text-decoration:none;
  10.     }
  11.  
  12.     </style>
  13.  
  14.  
  15.     <script type="text/javascript" language="javascript">
  16. tableonmouseover ="function changecolor();function changeborder();"
  17.     function changeColor(idObj,colorObj)
  18.     {
  19.         document.getElementById(idObj.id).style.color = colorObj;
  20.     }
  21. function changeborder ()
  22. {
  23. onfocus="this.style.border;"
  24. }
  25.     </script>
  26. </head>
  27. <body>
  28. <table width="548" border="1">
  29.   <tr onMouseOver="tableonmouseover">
  30.     <td width="214"><a href="#" style="color: #000000" onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='#000000'">
  31.         Link 1</a></td>
  32.     <td width="318"><img src="xxx.jpg" width="300" height="300" onMouseOver="this.style.border='5px solid blue'; underImg.style.visibility='visible';"
  33. onMouseOut="this.style.border='0px'; underImg.style.visibility='hidden';" ></td>
  34.   </tr>
  35. </table>
  36. </body>
  37. </html>

Reply

Marsh Posté le 17-06-2010 à 02:58:47    

Quelqu'un aurait une idée svp?

Reply

Sujets relatifs:

Leave a Replay

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