Webmaster Hub > modification couleur sur texte en même temps que dans la cellule en rollover

Version complète: sur le forum Webmaster Hub : modification couleur sur texte en même temps que dans la cellule en rollover

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > AjaX et JavaScript

hlcginfo

lundi 21 avril 2008 à 13:31

Bonjour,

je souhaite modifier le code suivant pour que le texte qui se situe dans la cellule change de couleur en même temps que la cellule lors d'un rollover sur celle-ci.

Mon code actuel : (la couleur ce modifie dans la cellule)
Code :

CODE

<td width="170" align="left" valign="top" bgcolor="#EAEAEA" onMouseOver="this.style.backgroundColor='#E85412'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#EAEAEA'">
       <table width="160" border="0" cellpadding="0" cellspacing="5">
                  <tr>
                    <td bgcolor="#FFFFFF"><a href="#" target="_blank"><img src="capture/monimage.jpg" width="160" height="100" border="0"></a></td>
                    </tr>
                  <tr>
                    <td><span class="Style1">blablabla</span><br>
                      <span class="Style3">blablabla</span> </td>
                    </tr>
        </table>
</td>

J'ai trouvé un code similaire à ce que je veut faire; mais il ne s'adapte pas à mon cas.

le code trouvé : (la couleur ce modifie sur le texte et dans la cellule)

Code :

CODE

<td bgcolor="#0066FF";
onMouseOver = "this.style.color = 'red';
this.style.background='black'"
onMouseOut = "this.style.color = 'black';
this.style.background='red'">blablabla</td>

Là le texte ce situe dans la balise <td>, mais lorsque l'on imbrique un tableau, l'effet ne marche plus.
Je souhaite garder la même structure de tableau présent dans mon code avec l'effet de changement sur le texte en même temps que le fond de cellule.

Je me demande si c'est possible de remplacer THIS par un une variable qui cible les balises <span>. Est-ce possible ?

Merci d'avance pour vos réponses

iNCiTE Web

lundi 21 avril 2008 à 14:10

Oui,

Il faut que tu identifies chaque zone) avec un id

CODE

<span id="nom_zone">blablabla</span>

Ensuite :

CODE

onMouseOver="document.getElementById('nom_zone').style.backgroundColor='#E85412'; this.style.cursor='hand';" onMouseOut="document.getElementById('nom_zone').style.backgroundColor='#EAEAEA'"

Chaque id de span doit bien sûr être unique dans toute la page... si les données proviennent d'une base c'est facile à générer...

Ifmy

mercredi 23 avril 2008 à 14:26

Si je ne m'abuse, il n'y a pas besoin d'utiliser JavaScript pour ça. une simple règle css :hover suffit

captain_torche

mercredi 23 avril 2008 à 14:31

Internet explorer supporte mal les :hover sur d'autres éléments que les liens.
Si tu veux utiliser le CSS et avoir un rendu uniforme quel que soit le navigateur, il faudra utiliser un hack pour ie, comme celui-ci : whatever:hover.

Dadou

mercredi 23 avril 2008 à 14:32

Non malheureusement pas, IE 6 et inférieurs ne gère la pseudo classe over que sur la balise a.

Il existe bien un "hack" pour le contrer, mais cela revient à faire du javascript

Edit : Captain à été plus rapide

hlcginfo

mardi 29 avril 2008 à 10:16

Désolé pour le retard de réponse de ma part... je vous remercie pour vos réponses. Je m'empresse d'essayer ce truc

Merci

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.