multiples changement de classes sur un seul onmouseover [JS] - HTML/CSS - Programmation
Marsh Posté le 03-03-2011 à 07:42:36
Salut.
Ce genre de système ?
Code :
|
En CSS je sais pas si c'est possible.
Qui dit mieux ?
Bonne chance !
Marsh Posté le 03-03-2011 à 08:29:24
Code :
|
Voilà un autre plus complet ! Vu qu'il n'y a plus qu'à modifier l'id pour choisir sa couleur.
Marsh Posté le 03-03-2011 à 08:40:18
tu veux pas faire un code plus complexe ?
Il y a plus simple en gerant surtout une classe hover dans la CSS, cela evite de devoir duppliquer le code des éléments
Marsh Posté le 03-03-2011 à 09:33:08
@cetplus :
Merci pour tes réponses, cependant :
Pour le premier code, cela pose soucis dans le fait que le nombre d'id peut être conséquent.
Pour le second, on ne peut avoir plusieurs id identiques dans une même page.
Marsh Posté le 03-03-2011 à 11:00:57
la methode simple c'est d'utiliser jquery ou prototype.
apres ca ressemble a un truc comme ca sous prototype si ton div autour a comme ID 'machin':
// on rajoute un event trigger a chaque element span dans ton div#machin
$$("#machin span " ).each(function(e) {
Event.observe(e,'mouseoover',function(event){
// a chaque fois qu'un event mouseover est detecte sur un span on appelle highlightEntry
highlightEntry(Event.findElement(event,'span'));
});
});
function highlightEntry(e){
// on remove le classname .hover de tous les elements pour clean
$$("#machin span" ).invoke('removeClassName',"hover" );
// on remet .hover a tous les elements du meme classname que l'element sur lequel on est
$$("#machin span."+e.getClassName()).invoke('addClassName',"hover" );
}
sinon il me semble que :hover ne s'applique qu'aux elements de type <a/> sous ie.
Marsh Posté le 03-03-2011 à 11:13:38
bah tiens j'ai deux bouts de code pour toi
>>> en jquery :
http://bnpparibasmasters.billetter [...] illetterie
le code js qui te concerne:
http://bnpparibasmasters.billetter [...] .pack.js?I
dans ce code les billets sont regroupes par "type", lorsqu'on focus un billet ca higlight tous les autres billets du meme type.
>>> en prototype
http://www.sovannkim.com/29--%20Ordinaires
code
http://www.sovannkim.com/js/sovann.carousel.js
partie du code pour toi c'est les $$("xxx" ).invoke()
c'est un raccourci prototype qui execute un truc pour chaque element de la liste qui match $$('xxx') la on l'utilise pour changer l'opacité mais ca marche aussi pour changer les couleurs.
Marsh Posté le 03-03-2011 à 13:53:45
@pop-pan
Merci beaucoup pour toute ton aide, j'ai trouvé ce que je voulais faire.
Je vais mettre un message avec mon résultats, pour aider ceux qui voudraient (à défaut de le corriger) s'en inspirer.
Encore merci à tout les participants
Marsh Posté le 03-03-2011 à 13:54:14
Code :
|
Marsh Posté le 03-03-2011 à 00:44:37
Bonjour
Voici ce que j'ai :
Aucun problème pour les ':hover' qui s'affichent en couleur au passage de la souris, comme il faut.
Mon intention est la suivante : Quand je fais un 'onmouseover' sur une classe de type 'crea_01', j'aimerais que toutes les entités ayant cette classe change de couleur. Il en ira de même pour le 'onmouseout' bien sûr.
Comme il est envisageable qu'il y ait plusieurs dizaines d'entités, une boucle avec un tableau associatif contenant un id par entité est, à mon avis, à proscrire, et je suis intimement persuadé qu'il existe une manière plus simple, mais qui m'est encore inconnue.
Si vous avez une idée, ou connaissez une solution, je suis ouvert à toute proposition.
Au revoir et Merci