[JS] multiples changement de classes sur un seul onmouseover

multiples changement de classes sur un seul onmouseover [JS] - HTML/CSS - Programmation

Marsh Posté le 03-03-2011 à 00:44:37    

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

Reply

Marsh Posté le 03-03-2011 à 00:44:37   

Reply

Marsh Posté le 03-03-2011 à 07:42:36    

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
Reply

Marsh Posté le 03-03-2011 à 08:29:24    

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.

Reply

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


Message édité par gatsu35 le 03-03-2011 à 08:42:07

---------------
Blablaté par Harko
Reply

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.

Reply

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.


---------------
Plop !
Reply

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.


---------------
Plop !
Reply

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

Reply

Marsh Posté le 03-03-2011 à 13:54:14    

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>

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed