Salut
 
J'ai un tableau assez important, et lorsque que la souris va au dessus d'une cellule, j'ai besoin que la cellule change de couleur.
 
C'est sûr, on peut faire un onmouseover="this.style.backgroundColor='xxx'".
Mais dans le cas réel, cette solution n'est pas possible - à moins de mettre un autre tableau dans chaque cellule
J'ai donc essayé de le faire en CSS.
Dans chaque cellule, je mets un lien - CSS du lien "display: block;height: 20px;".
J'ai fait un style:hover - CSS "background-color: #0000FF;".
 
Quand le tableau est petit, les cellules changent correctement de couleur sur IE comme sur Firefox.
Par contre, quand le tableau devient plus important (genre 30*15), sur IE, ça rame - le changement de couleur fonctionne mal si on bouge la souris rapidement (et dans un tableau plus important, c'est encore pire) - sur Firefox, c'est toujours aussi rapide !
 
Voici le code de ma page :

 
Le problème est le même si le tableau est en HTML dur ou généré en HTML dur…
 
Quelqu'un a une explication ?

Il y a bien plus simple que de s'embrouiller avec des tableaux et du javascript : http://www.alsacreations.com/artic [...] smenu3.htm

Ce que j'ai fait n'est qu'une version archi-simplifiée du résultat final pour montrer le problème.
J'ai déjà pensé aux alternatives - et le tableau est la meilleure solution
 
C'est juste que je ne comprends pas la lenteur avec IE

Alors là, faudrait m'expliquer pourquoi parce que ce serait bien la première fois pour ce genre de choses !

Peut-être pour afficher des données tabulaire au final

 
Des données tabulaires bien cachées alors !
 
td {padding: 0px;border: 1px solid #E8E8FF;height: 20px;font-size: 0px;width: 20px;background-color: #FFFFE8;}
 
 

Y'a autre chose que du text !
 
edit: et faut pas oublier que c'est un exemple très simplifié

C'est peut-être ça le problème : que vont contenir tes liens si la taille de texte est nulle?
Des images ? générées à la volée? en background ?

essai

 
Bonjour
 
Je cherche à faire quelquechose qui ressemble à ce que Gamma explique
 
J'ai repris le code du menu horizontale de ton site
 
Quelques questions :  
 - comment ne pas avoir le grand espace entre deux lignes ?
 - comment gerer une superposition du bord (pour n'avoir une bordure de 1px reellement) (= collapse pour les table) ?
 - comment utiliser les proprietes display:inline et display:block ou float:left pour realiser un "tableau" de div (=ensemble de div en vue de faire un planning)
 
Je ne demande qu'à etre convaincu...

Pour l'espace entre les lignes :
> ul {margin:0px;}
 
Pour la superposition, ca m'interresse egalement
 

brakas, essaye ce code :
 

 
 
...mais le problème reste le même avec IE. Et c’est pire si on augmente i ou j !

Merci
 
C'est dingue que ca marche si bien sous fireFox et si lentement sous IE
onmouseover="this.style.backgroundColor='xxx'" permet de se passer du <a..></a>
 
Avec

Test ça : tu vas voir comment c'est réactif : c'est dingue !
 
Par contre, ta ruse pour n'avoir un bord de 1 px d'epaisseur est legère. Y'a pas moyen de faire un truc plus propre ?

> Test ça : tu vas voir comment c'est réactif : c'est dingue !  
Déjà testé
Mais le code est plus long et c'est sur toute la cellule. Avec le lien, y’a moyen de jouer sur la hauteur
 
> Par contre, ta ruse pour n'avoir un bord de 1 px d'epaisseur est legère.
> Y'a pas moyen de faire un truc plus propre ?
J’ai rien trouvé  
Les span, div ou li sont `indépendant` et dans le table, c’est différent…

Puisque tu utilises JavaScript pour générer ton tableau essaye de faire ça proprement en utilisant les fonctions DOM pour ajouter au tableau les lignes au fur et à mesure et, pour chaque ligne, les cellules.
 
Donc, voir la fonction document.createElement() (pour créer les TR et les TD) ; la fonction ton_element.appendChild() (pour ajouter les TR à TABLE et les TD à TR)
 
Ensuite, à chaque cellule créée il te suffira d'attacher les évènements onmouseover et onmouseout. (fonction attachEvent() pour IE et addEventListener() pour Moz)

>>Puisque tu utilises JavaScript pour générer ton tableau
Dans le cas réel, le tableau est qu'en HTML (générer en PHP – mais le résultat [lenteur sur IE] est le même) - je l'ai mis en JS pour alléger le code et pouvoir le mettre ici (et aussi faire différent tests)
 
En tout cas, je connaissais pas du tout createElement() & co – je vais aller sur google pour voir plus d’info - thanks

Ben si le tableau est déjà fait tu peux essayer d'utiliser getElementsByTagName("td" ) (à appliquer au tableau) pour récupérer d'un coup toutes les cellules et sur lesquelles il te resteras plus qu'à attacher les évènements.
 
Ceci dit il est possible que ça reste lent avec IE. Cette méthode a l'avantage de se passer de l'élément A pour faire le hover et c'est peut être cet élément superflu qui fait que ça rame. Si ça va pas plus vite c'est que IE est irrémédiablement lent pour ce genre de chose

C'est une soluce – Je vais voir comment ça marche exactement - ce que j'aimais bien avec les liens, c'est que je pouvais en mettre plusieurs dans la même cellule (pratique pour diviser en zone) et que xxx:hover fonctionne uniquement avec les liens sur IE (Ca me permettait donc de me passer de JS)
 
Au fait, ça ne risque pas d’être trop lent de faire getElementsByTagName("td" ) + appliquer les événements pour un gros tableau ?
 

Dommage  
 
Thanks

C'est quoi pour toi un gros tableau ?
 
De toute façon il faudra bien tester...