[JS] multiples changement de classes sur un seul onmouseover

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [JS] multiples changement de classes sur un seul onmouseover

xkamui

Their Destiny Was Foreordained

Bonjour

Voici ce que j'ai :

Code :

<style>
span {display: block;}
#creas span.crea_01, #creas span.crea_02, #creas span.crea_03 {color: #000000;}
#creas span.crea_01:hover {color: #FF0000;}
#creas span.crea_02:hover {color: #00FF00;}
#creas span.crea_03:hover {color: #0000FF;}
</style>
<div id="creas">
<span class="crea_01">texte</span>
<span class="crea_02">texte</span>
<span class="crea_01">texte</span>
<span class="crea_03">texte</span>
<span class="crea_02">texte</span>
<span class="crea_03">texte</span>
</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

Publicité

cetplus

Wazard dans l'ombre

Salut.
Ce genre de système ?

Code :

<style>
span {display: block;}
</style>
<script language="Javascript">
<!--
function crea(x,c){var doc = document.getElementById("crea"+x).style;doc.color = c;}
function fine(){crea('1','#000000');crea('1b','#000000');crea('2','#000000');crea('2b','#000000');crea('3','#000000');crea('3b','#000000');}
function crea1(){crea('1','#FF0000');crea('1b','#FF0000');}
function crea2(){crea('2','#00FF00');crea('2b','#00FF00');}
function crea3(){crea('3','#0000FF');crea('3b','#0000FF');}
//-->
</script>
<div>
<span id="crea1" OnMouseOver="crea1();" OnMouseOut="fine();">Fruit</span>
<span id="crea2" OnMouseOver="crea2();" OnMouseOut="fine();">Poisson</span>
<span id="crea1b" OnMouseOver="crea1();" OnMouseOut="fine();">Pomme</span>
<span id="crea3" OnMouseOver="crea3();" OnMouseOut="fine();">Alcool</span>
<span id="crea2b" OnMouseOver="crea2();" OnMouseOut="fine();">Saumon</span>
<span id="crea3b" OnMouseOver="crea3();" OnMouseOut="fine();">Bière</span>
</div>

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

Message édité par cetplus le 03-03-2011 à 07:46:30

cetplus

Wazard dans l'ombre

Code :

<style>
span {display: block;}
</style>
<script language="Javascript">
<!--
function crea(x,c){var doc = document.getElementsByTagName("span" )[x].style;doc.color = c;}
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" );}}}
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" );}}}
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" );}}}
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" );}}}
//-->
</script>
<div>
<span class="crea" id="crea1" OnMouseOver="crea1();" OnMouseOut="fine();">Fruit</span>
<span class="crea" id="crea2" OnMouseOver="crea2();" OnMouseOut="fine();">Poisson</span>
<span class="crea" id="crea1" OnMouseOver="crea1();" OnMouseOut="fine();">Pomme</span>
<span class="crea" id="crea3" OnMouseOver="crea3();" OnMouseOut="fine();">Alcool</span>
<span class="crea" id="crea3" OnMouseOver="crea3();" OnMouseOut="fine();">cidre</span>
<span class="crea" id="crea2" OnMouseOver="crea2();" OnMouseOut="fine();">Saumon</span>
<span class="crea" id="crea3" OnMouseOver="crea3();" OnMouseOut="fine();">Bière</span>
<span class="crea" id="crea1" OnMouseOver="crea1();" OnMouseOut="fine();">poire</span>
<span class="crea" id="crea2" OnMouseOver="crea2();" OnMouseOut="fine();">Poisson chat</span>
<span class="crea" id="crea2" OnMouseOver="crea2();" OnMouseOut="fine();">thon</span>
<span class="crea" id="crea1" OnMouseOver="crea1();" OnMouseOut="fine();">abricot</span>
<span class="crea" id="crea3" OnMouseOver="crea3();" OnMouseOut="fine();">vin</span>
</div>

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

gatsu35

Blablaté par Harko

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

xkamui

Their Destiny Was Foreordained

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

pop-pan

yay!

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

pop-pan

yay!

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

xkamui

Their Destiny Was Foreordained

@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

xkamui

Their Destiny Was Foreordained

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="creas">
<div class="creaid-01"><span>Lorem ipsum</span></div>
<div class="creaid-02"><span>Lorem ipsum</span></div>
<div class="creaid-02"><span>Lorem ipsum</span></div>
<div class="creaid-01"><span>Lorem ipsum</span></div>
<div class="creaid-02"><span>Lorem ipsum</span></div>
<div class="creaid-02"><span>Lorem ipsum</span></div>
<div class="creaid-03"><span>Lorem ipsum</span></div>
<div class="creaid-03"><span>Lorem ipsum</span></div>
<div class="creaid-03"><span>Lorem ipsum</span></div>
<div class="creaid-03"><span>Lorem ipsum</span></div>
<div class="creaid-01"><span>Lorem ipsum</span></div>
<div class="creaid-01"><span>Lorem ipsum</span></div>
<div class="creaid-03"><span>Lorem ipsum</span></div>
<div class="creaid-03"><span>Lorem ipsum</span></div>
<div class="creaid-02"><span>Lorem ipsum</span></div>
<div class="creaid-03"><span>Lorem ipsum</span></div>
<div class="creaid-01"><span>Lorem ipsum</span></div>
<div class="creaid-03"><span>Lorem ipsum</span></div>
<div class="creaid-01"><span>Lorem ipsum</span></div>
<div class="creaid-03"><span>Lorem ipsum</span></div>
<div class="creaid-02"><span>Lorem ipsum</span></div>
<br class="clear" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$('#creas div.creaid-01').hover(function() {
$('#creas div.creaid-01 span').addClass('creaid-01-over');
}, function() {
$('#creas div.creaid-01 span').removeClass('creaid-01-over');
});
$('#creas div.creaid-02').hover(function() {
$('#creas div.creaid-02 span').addClass('creaid-02-over');
}, function() {
$('#creas div.creaid-02 span').removeClass('creaid-02-over');
});
$('#creas div.creaid-03').hover(function() {
$('#creas div.creaid-03 span').addClass('creaid-03-over');
}, function() {
$('#creas div.creaid-03 span').removeClass('creaid-03-over');
});
</script>
</body>
</html>

FORUM HardWare.fr

Programmation

HTML/CSS

[JS] multiples changement de classes sur un seul onmouseover

Sujets relatifs
[RegEx] Supprimer les espaces multiples	Problè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 JS	Condition qui se mette toute seul
Forcer les classes filles à avoir des méthodes/attributs static	Regroupement 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

Page générée en 0.113 secondes