Rollover css et pas de JS!

Consultez la formation à Google Analytics de WebRankInfo / Ranking Metrics

achaternet
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 256
Enregistré le: 11 Fév 2003

Rollover css et pas de JS!

Message le Jeu Aoû 19, 2004 14:42

Bonjour,

Je cherche desesperement, mais cela n est peut etre pas possible de creer un changement de couleur d un ligne d un table au survol de la souris.

J'arrive a le faire avec l association du JS par un onmouseover et onmouseout.

Es ce possible sans JS???

car ca alourdie la page inutilement, si on peut le definir une bonne fois pour toute dans le CSS par expl avec hover

:?:
Modifié en dernier par achaternet le Jeu Aoû 19, 2004 20:11, modifié 1 fois.


Bool
WRInaute passionné
WRInaute passionné
 
Messages: 1603
Enregistré le: 26 Fév 2004

Message le Jeu Aoû 19, 2004 14:44

Oui c'est tout à fait possible, mais IE lui ne sait pas faire...

IE ne gère le :hover que sur les liens.

achaternet
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 256
Enregistré le: 11 Fév 2003

Message le Jeu Aoû 19, 2004 14:54

Bool a écrit:Oui c'est tout à fait possible, mais IE lui ne sait pas faire...

IE ne gère le :hover que sur les liens.


Ya pas de soluce alors :?: (notamment pour IE)

Mon objectif, c est que ce soit compatible avec tous les navigateurs bien sur :)


Bool
WRInaute passionné
WRInaute passionné
 
Messages: 1603
Enregistré le: 26 Fév 2004

Message le Jeu Aoû 19, 2004 15:06

Peux être avec "l'astuce" IE 7, mais je ne sais pas s'il gère les :hover


Bool
WRInaute passionné
WRInaute passionné
 
Messages: 1603
Enregistré le: 26 Fév 2004

Message le Jeu Aoû 19, 2004 15:09

Je viens d'aller sur le site officiel, et il le gère : http://dean.edwards.name/IE7/

Mais attention : il s'agit en fait d'un package "Javascript" dédié à IE afin qu'il fonctionne comme tous les autres navigateurs (bah oui, c'est le seul navigateur actuel qui ne sait pas faire). Donc tu allègeras pour Google et les visiteurs ayant un vrai navigateur, mais tu allourdiras pour tous ceux qui ont IE.

PS : le gros avantage c'est de ne pas avoir à modifier ton code...

achaternet
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 256
Enregistré le: 11 Fév 2003

Message le Jeu Aoû 19, 2004 15:27

Merci bool

ca reste trop relou :!: :!:

sniff. :cry:


Bool
WRInaute passionné
WRInaute passionné
 
Messages: 1603
Enregistré le: 26 Fév 2004

Message le Jeu Aoû 19, 2004 15:30

bah... de rien... désolé de ne pas avoir su t'aider

maxttb
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 477
Enregistré le: 27 Fév 2004

Message le Jeu Aoû 19, 2004 23:07

Bon, c'est à base de javascript, mais ce sera certainement beaucoup moins lourd que ta solution actuelle...
En gros, ca simule un :hover pour IE, très utile!
J'utilise ce bout de code que j'appelle dans le onload du body pour faire un rollover sur les LI d'un menu sous IE. Ca marche très bien jusqu'à maintenant, suffit de l'adapter pour les TR (au moins 2 caractères à modifier...)

Code: Tout sélectionner
startList = function()
{
   if (document.all&&document.getElementById)
   {
      navRoot = document.getElementById("menu").childNodes[1];
      
      for (i=0; i<navRoot.childNodes.length; i++)
      {
         node = navRoot.childNodes[i];
         
         if (node.nodeName=="LI")
         {
            node.onmouseover=function()
            {
               this.className+=" over";
            }

            node.onmouseout=function()
            {
               this.className=this.className.replace(" over", "");
                  }
         }
      }
   }
}
window.onload=startList;


Ensuite, dans mon CSS, je déclare

Code: Tout sélectionner
#menu ul li:hover ul,#menu ul .over ul
{
   display:block;
}


Pour faire apparaitre un menu déroulant sur mon menu, reste plus qu'à adapter pour changer la couleur de fond (au moins une ligne à changer...)

En esperant que cette première piste te soit utile...


ecocentric
WRInaute accro
WRInaute accro
 
Messages: 3605
Enregistré le: 10 Fév 2004

Message le Jeu Aoû 19, 2004 23:27

sinon, tu peux jouer avec la propriété background-color au niveau des liens. Ca marche sous IE et les navigateurs basés sur Gecko.

petit-ourson
WRInaute impliqué
WRInaute impliqué
 
Messages: 855
Enregistré le: 31 Mai 2004

Message le Ven Aoû 20, 2004 0:17

Avec le display:block sur les liens, on peut aussi s'en tirer pas mal.


ecocentric
WRInaute accro
WRInaute accro
 
Messages: 3605
Enregistré le: 10 Fév 2004

Message le Ven Aoû 20, 2004 8:30

bastgau a écrit:Avec le display:block sur les liens, on peut aussi s'en tirer pas mal.


C'est à ça que je pensais : background-color + display:block. display:block ne marche pas sous IE4 mais au delà il n'y a pas de problème. Ca te fait des liens dont tout le fond se met dans la couleur de background quand tu passes au dessus. L'attribut display te permet de lui imposer de régler le background pour toute la largeur disponible, pas uniquement celle occupée par le lien. Tu as donc plus ou moins le même effet qu'en JS.


Bool
WRInaute passionné
WRInaute passionné
 
Messages: 1603
Enregistré le: 26 Fév 2004

Message le Ven Aoû 20, 2004 8:38

bastgau a écrit:Avec le display:block sur les liens, on peut aussi s'en tirer pas mal.

+1

achaternet
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 256
Enregistré le: 11 Fév 2003

Message le Ven Aoû 20, 2004 18:31

merci pour tes precisions ecocentric sur la compatibilité.


Plus precisement, ça donne ?


background-color + display:block

j'ai juste a modif mon css et dire que pour tous mes <tr> cette regle dans avec l action hover, et c tout??


Formation recommandée sur ce thème :

Formation Google Analytics : en 2 jours, apprenez comment exploiter l'essentiel des possibilités de l'outil de mesure d'audience de Google. Formation animée par les experts Google Analytics de Ranking Metrics.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :