Titre: Changement de la class d'une cellule au survol
Posté par: Shain le le 02-08-2003 a 01:07:37
J'ai un code tout bete ... mais qui ne fonctionne pas !
<a href="#">
<td onMouseOver="this.class='boutonDessus';" onMouseOut="this.class='boutonRepos';" class="boutonRepos">A</td></a>
J'aimerai qu'au survol de la cellule la class soit changé mais ca ne fonctionne pas. Pourtant avec le background ca marche ... |
Titre: Re:Changement de la class d'une cellule au survol
Posté par: SIBELIUS le le 02-08-2003 a 01:23:06
this.className ;)
ARG ! par contre, c'est une hérésie d'appliquer un A à une cellule :o |
Titre: Re:Changement de la class d'une cellule au survol
Posté par: Shain le le 02-08-2003 a 02:44:57
Merci ca marche !
| ARG ! par contre, c'est une hérésie d'appliquer un A à une cellule |
|
Alors brulez moi !
Résultat : http://www.forum-webmaster.com/lexique (en finition) |
Titre: Re:Changement de la class d'une cellule au survol
Posté par: Karyam le le 02-08-2003 a 04:32:02
Yeah! J'y connais rien en programmation, mais en tous cas merci pour le lexique! :-*
PS: oublie pas de rajouter les accents, moi je les ai pas sur mon clavier de yankee! |
Titre: Re:Changement de la class d'une cellule au survol
Posté par: SIBELIUS le le 02-08-2003 a 11:20:46
Plusieurs choses :
- ton code ne marche que sur IE (testé sur Mozilla, Firebird et Opera : il ne se passe rien au clic). Normal, à cause du A placé n'importe où :(
- tes CSS sont, comment dire, très longues avec beaucoup de répétition inutiles.
Par exemple, cette classe :
Code:
.boutonDessus {
background-color: #B1B1B1;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #FFFFFF;
cursor: hand;
}
|
|
Peut être écrite de cette manière :
Code:
.boutonDessus {
background-color: #B1B1B1;
border: 1px solid #000;
border-top-color: #FFF;
border-left-color: #FFF;
cursor: hand;
}
|
|
C'est plus simple, non? ;)
- Pour finir, tu peux encore alléger nettement le code (et le rendre compatible partout), en simplifiant tout ça : pourquoi utiliser un A + TD + javascript (mouseover,...) alors que tu peux tout faire simplement avec un seul A ?
Je vais me plonger dans ton code et te montrer une version qui fonctionne, si tu le veux bien |
Titre: Re:Changement de la class d'une cellule au survol
Posté par: SIBELIUS le le 02-08-2003 a 11:49:05
Bon, voilà, j'ai tout simplifié en mettant tout dans la balise A :
Code:
a.menu {
float: left;
display : block;
width : 12px;
height : 12px;
text-decoration : none;
text-align : center;
color: #333;
margin: 0 1px 0 2px;
border: 1px solid #838383;
}
a.menu:hover {
background-color: #B1B1B1;
border: 1px solid #000;
border-top-color: #FFF;
border-left-color: #FFF;
}
a.menu:active {
background-color: #CCC;
border: 1px solid #000;
border-right-color: #FFF;
border-bottom-color: #FFF;
}
|
|
Pour le menu, maintenant, rien de plus simple :
Code:
<a class="menu" href="">A</a>
<a class="menu" href="">B</a>
<a class="menu" href="">C</a>
... etc ...
|
|
C'est compatible avec tout les navigateurs (testé sous IE6, opera7, Mozilla 1.3 et Firebird 0.6)... même chez les gens qui ont désactivé javascript ! (13% quand-même)
Si tu veux la page html complète, je te l'envoie par email, vu qu'on ne peut pas mettre de fichiers joints apparemment |
Titre: Re:Changement de la class d'une cellule au survol
Posté par: Toutankharton le le 02-08-2003 a 13:35:13
| clap clap ! c'est du boulot de pro ! bravo ;D |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|