Discussion :

[John Vass]

Bonjour, tout le monde.

J'ai un petit souci.
D'habitude, je réalise des roll-over en actionscript tout simple avec la methode getElementById de façon à changer l'image quand on la survole. Bon çà, c'est du tout bête...
Mais là, j'ai affaire à une navigation bien différente. En effet, on veut des boutons avec le texte dedans et un background aux bords arrondis, sans compter les ombrages. Rien que ca, ca va être un belle bagarre à faire...

Ma question est la suivante :
Peut-on faire en sorte que quand on survole le bouton, on change sa classe CSS ? Et si oui, comment ?

Je commence à faire des recherches de mon côté, mais pour le moment, c'est pas la joie !

Merci pour votre aide !

[vermine]

Bonsoir,

C'est obligatoire de passer par les styles ? La version "toute bête" comme vous dites ne suffit pas ? Bon, d'accord, il faut savoir faire de belles icônes.

[SpaceFrog]

Peut-on faire en sorte que quand on survole le bouton, on change sa classe CSS ? Et si oui, comment ?

Ben c'est un peu la base des rollover css ...
on peut modifier sa classe ou plus simplement modifier son background position. une seul image pour le background composée des differents état juxtaposés

[John Vass]

Déjà, rien que les boutons en eux même c'est un sacré bazar.
J'ai ouvert une discution là dessus, sur la partie CSS du forum.

http://www.developpez.net/forums/d93...s/#post5261063

[dukej]

Déjà, rien que les boutons en eux même c'est un sacré bazar.
J'ai ouvert une discution là dessus, sur la partie CSS du forum.

http://www.developpez.net/forums/d93...s/#post5261063

Nan c'est tout con à faire, check dans le forum CSS de ce site, ils viendront te donner une solution très propre.

[jbin-1]

Si c'est un simple rollover il suffit d'utiliser le selecteur css : "hover" qui correspond à l'état au survol de la souris

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
ma_classe{
  background-image : url(mon_image)
}
ma_classe:hover{
  background-image : url(mon_autre_image)
}

Sinon si tu préfères en javascript je ne me souviens plus exactement de la syntaxe mais en jquery ca donnerait

$("#mon_id").addClass("ma_classe") pour ajouter la classe et
$("#mon_id").removeClass("ma_classe") pour l'enlever

[jbin-1]

SpaceFrog ce n'est pas crossbrowser tu veux plutôt dire que ie 6 et inférieur ne le supporte pas.

Je pense qu'il faut rapidement arrêter de se soucier de ce navigateur qui empêche le Web d'évoluer et le développeur d'avancer...

[SpaceFrog]

malheureusement IE6 n'est pas mort...
nombreux sont nos client qui l'utilisent encore et je ne peux donc par conséquent pas le négliger ...

[devyan]

malheureusement IE6 n'est pas mort...

Je crois que ce jour là il va y avoir "du développeur web" avec mal aux cheveux dans tous les coins

[RomainVALERI]

Je pense qu'il faut rapidement arrêter de se soucier de ce navigateur qui empêche le Web d'évoluer et le développeur d'avancer...

On voudrait tous pouvoir oublier IE6
Malheureusement ça dépend encore du contexte de ton projet : pour un outil maison pas de souci, mais pour une diffusion globale, il y a encore trop de postes (notamment dans les entreprises où les utilisateurs n'ont pas toujours les droits pour installer leurs applis) qui n'ont qu'IE6 pour naviguer... ^^

Courage ça finira par venir

[jbin-1]

Je sais très bien ne vous inquiétez pas (mon entreprise m'oblige également à faire tourner nos sites sous ie6). Mais je pense que le vrai problème est là! si tout le monde se mettait d'accord pour ne pas penser aux entreprises qui tournent encore sous ie6 ces dernières n'auraient plus d'autre choix que d'évoluer... Mais je sais que cela reste un point de vue et une utopie.

[Shirraz]

en même temps il n'y a pas à discuter quand rendre cross-browser ne coûte rien ! D'autant plus que ta solution demande le chargement de deux images, avec un laps de temps entre le passage de l'une à l'autre (au premier survol), ce qui sera moche...


faire trois ligne de CSS en plus pour modifier le background-position d'un sprite et modifier la classe d'un élément survolé se fait simplement, c'est cross-browser et c'est plus joli !


Par exemple, si ton bouton fait 80x20, tu fait un sprite de 80x40 avec les deux boutons l'un au dessus de l'autre, en javascript tu modifie l'attribut class en ajoutant "actif" au survol et l'efface quand tu ne survol plus, et en css (pour un span par exemple)

span {
background: url('ton/image.png');
}

span.active {
background-position: -20px 0;
}

Et hop, ça se fera sans latence ! Tu peux aussi modifier le bckgrd-pos en javascript, mais je préfère modifier mes fichiers CSS en cas de changement plutôt que des scripts JS... La même technique sans JS et 100% CSS pour les liens, en remplacant "a.active" par "a:hover" Parce que tant qu'on peut le faire en CSS, autant laisser JS de coté.



Faire des sprites et jouer sur le bckgrd-pos c'est un peu la base pour les sites. Exemple : un sprite de Facebook ou un sprite de boutons trouvé sur Google !