Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1220 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [JS] multiples changement de classes sur un seul onmouseover

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[JS] multiples changement de classes sur un seul onmouseover

n°2060771
xkamui
Their Destiny Was Foreordained
Posté le 03-03-2011 à 00:44:37  profilanswer
 

Bonjour
 
Voici ce que j'ai :  

Code :
  1. <style>
  2. span {display: block;}
  3. #creas span.crea_01, #creas span.crea_02, #creas span.crea_03 {color: #000000;}
  4. #creas span.crea_01:hover {color: #FF0000;}
  5. #creas span.crea_02:hover {color: #00FF00;}
  6. #creas span.crea_03:hover {color: #0000FF;}
  7. </style>
  8. <div id="creas">
  9.   <span class="crea_01">texte</span>
  10.   <span class="crea_02">texte</span>
  11.   <span class="crea_01">texte</span>
  12.   <span class="crea_03">texte</span>
  13.   <span class="crea_02">texte</span>
  14.   <span class="crea_03">texte</span>
  15. </div>

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

mood
Publicité
Posté le 03-03-2011 à 00:44:37  profilanswer
 

n°2060778
cetplus
Wazard dans l'ombre
Posté le 03-03-2011 à 07:42:36  profilanswer
 

Salut.
Ce genre de système ?

Code :
  1. <style>
  2. span {display: block;}
  3. </style>
  4. <script language="Javascript">
  5. <!--
  6. function crea(x,c){var doc = document.getElementById("crea"+x).style;doc.color = c;}
  7. function fine(){crea('1','#000000');crea('1b','#000000');crea('2','#000000');crea('2b','#000000');crea('3','#000000');crea('3b','#000000');}
  8. function crea1(){crea('1','#FF0000');crea('1b','#FF0000');}
  9. function crea2(){crea('2','#00FF00');crea('2b','#00FF00');}
  10. function crea3(){crea('3','#0000FF');crea('3b','#0000FF');}
  11. //-->
  12. </script>
  13. <div>
  14.   <span id="crea1" OnMouseOver="crea1();" OnMouseOut="fine();">Fruit</span>
  15.   <span id="crea2" OnMouseOver="crea2();" OnMouseOut="fine();">Poisson</span>
  16.   <span id="crea1b" OnMouseOver="crea1();" OnMouseOut="fine();">Pomme</span>
  17.   <span id="crea3" OnMouseOver="crea3();" OnMouseOut="fine();">Alcool</span>
  18.   <span id="crea2b" OnMouseOver="crea2();" OnMouseOut="fine();">Saumon</span>
  19.   <span id="crea3b" OnMouseOver="crea3();" OnMouseOut="fine();">Bière</span>
  20. </div>
 

En CSS je sais pas si c'est possible.
Qui dit mieux ?  :D
Bonne chance !


Message édité par cetplus le 03-03-2011 à 07:46:30
n°2060784
cetplus
Wazard dans l'ombre
Posté le 03-03-2011 à 08:29:24  profilanswer
 

Code :
  1. <style>
  2. span {display: block;}
  3. </style>
  4. <script language="Javascript">
  5. <!--
  6. function crea(x,c){var doc = document.getElementsByTagName("span" )[x].style;doc.color = c;}
  7. function fine(){var ida;var dc=document.getElementsByTagName("span" );var i=0;for(i in dc){var ida="a"+dc[i].id;if(ida.indexOf("crea" )>=0){crea(i,"#000000" );}}}
  8. function crea1(){var ida;var dc=document.getElementsByTagName("span" );var i=0;for(i in dc){var ida="a"+dc[i].id;if(ida.indexOf("crea1" )>=0){crea(i,"#FF0000" );}}}
  9. function crea2(){var ida;var dc=document.getElementsByTagName("span" );var i=0;for(i in dc){var ida="a"+dc[i].id;if(ida.indexOf("crea2" )>=0){crea(i,"#00FF00" );}}}
  10. function crea3(){var ida;var dc=document.getElementsByTagName("span" );var i=0;for(i in dc){var ida="a"+dc[i].id;if(ida.indexOf("crea3" )>=0){crea(i,"#0000FF" );}}}
  11. //-->
  12. </script>
  13. <div>
  14.   <span class="crea" id="crea1" OnMouseOver="crea1();" OnMouseOut="fine();">Fruit</span>
  15.   <span class="crea" id="crea2" OnMouseOver="crea2();" OnMouseOut="fine();">Poisson</span>
  16.   <span class="crea" id="crea1" OnMouseOver="crea1();" OnMouseOut="fine();">Pomme</span>
  17.   <span class="crea" id="crea3" OnMouseOver="crea3();" OnMouseOut="fine();">Alcool</span>
  18.   <span class="crea" id="crea3" OnMouseOver="crea3();" OnMouseOut="fine();">cidre</span>
  19.   <span class="crea" id="crea2" OnMouseOver="crea2();" OnMouseOut="fine();">Saumon</span>
  20.   <span class="crea" id="crea3" OnMouseOver="crea3();" OnMouseOut="fine();">Bière</span>
  21.   <span class="crea" id="crea1" OnMouseOver="crea1();" OnMouseOut="fine();">poire</span>
  22.   <span class="crea" id="crea2" OnMouseOver="crea2();" OnMouseOut="fine();">Poisson chat</span>
  23.   <span class="crea" id="crea2" OnMouseOver="crea2();" OnMouseOut="fine();">thon</span>
  24.   <span class="crea" id="crea1" OnMouseOver="crea1();" OnMouseOut="fine();">abricot</span>
  25.   <span class="crea" id="crea3" OnMouseOver="crea3();" OnMouseOut="fine();">vin</span>
  26. </div>


 
Voilà un autre plus complet ! Vu qu'il n'y a plus qu'à modifier l'id pour choisir sa couleur.

n°2060786
gatsu35
Posté le 03-03-2011 à 08:40:18  profilanswer
 

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


Message édité par gatsu35 le 03-03-2011 à 08:42:07
n°2060794
xkamui
Their Destiny Was Foreordained
Posté le 03-03-2011 à 09:33:08  profilanswer
 

@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.

n°2060869
pop-pan
yay!
Posté le 03-03-2011 à 11:00:57  profilanswer
 

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.


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
n°2060875
pop-pan
yay!
Posté le 03-03-2011 à 11:13:38  profilanswer
 

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.


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
n°2060920
xkamui
Their Destiny Was Foreordained
Posté le 03-03-2011 à 13:53:45  profilanswer
 

@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

n°2060921
xkamui
Their Destiny Was Foreordained
Posté le 03-03-2011 à 13:54:14  profilanswer
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <link rel="stylesheet" type="text/css" href="styles.css" />
  7. </head>
  8. <body>
  9. <div id="creas">
  10. <div class="creaid-01"><span>Lorem ipsum</span></div>
  11. <div class="creaid-02"><span>Lorem ipsum</span></div>
  12. <div class="creaid-02"><span>Lorem ipsum</span></div>
  13. <div class="creaid-01"><span>Lorem ipsum</span></div>
  14. <div class="creaid-02"><span>Lorem ipsum</span></div>
  15. <div class="creaid-02"><span>Lorem ipsum</span></div>
  16. <div class="creaid-03"><span>Lorem ipsum</span></div>
  17. <div class="creaid-03"><span>Lorem ipsum</span></div>
  18. <div class="creaid-03"><span>Lorem ipsum</span></div>
  19. <div class="creaid-03"><span>Lorem ipsum</span></div>
  20. <div class="creaid-01"><span>Lorem ipsum</span></div>
  21. <div class="creaid-01"><span>Lorem ipsum</span></div>
  22. <div class="creaid-03"><span>Lorem ipsum</span></div>
  23. <div class="creaid-03"><span>Lorem ipsum</span></div>
  24. <div class="creaid-02"><span>Lorem ipsum</span></div>
  25. <div class="creaid-03"><span>Lorem ipsum</span></div>
  26. <div class="creaid-01"><span>Lorem ipsum</span></div>
  27. <div class="creaid-03"><span>Lorem ipsum</span></div>
  28. <div class="creaid-01"><span>Lorem ipsum</span></div>
  29. <div class="creaid-03"><span>Lorem ipsum</span></div>
  30. <div class="creaid-02"><span>Lorem ipsum</span></div>
  31. <br class="clear" />
  32. </div>
  33. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  34. <script>
  35. $('#creas div.creaid-01').hover(function() {
  36. $('#creas div.creaid-01 span').addClass('creaid-01-over');
  37. }, function() {
  38. $('#creas div.creaid-01 span').removeClass('creaid-01-over');
  39. });
  40. $('#creas div.creaid-02').hover(function() {
  41. $('#creas div.creaid-02 span').addClass('creaid-02-over');
  42. }, function() {
  43. $('#creas div.creaid-02 span').removeClass('creaid-02-over');
  44. });
  45. $('#creas div.creaid-03').hover(function() {
  46. $('#creas div.creaid-03 span').addClass('creaid-03-over');
  47. }, function() {
  48. $('#creas div.creaid-03 span').removeClass('creaid-03-over');
  49. });
  50. </script>
  51. </body>
  52. </html>


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [JS] multiples changement de classes sur un seul onmouseover

 

Sujets relatifs
[RegEx] Supprimer les espaces multiplesProblème lors du changement du format de l'URL sur Wordpress
[Resolu][JS] Quelle différence entre mes deux codes ?Création de fichier multiples
formulaire html et JSCondition qui se mette toute seul
Forcer les classes filles à avoir des méthodes/attributs staticRegroupement de résultats sur une seul ligne
Variables de classes héritées 
Plus de sujets relatifs à : [JS] multiples changement de classes sur un seul onmouseover


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR