Modifier toutes les classes (externes, internes) de la page sur un hover
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Modifier toutes les classes (externes, internes) de la page sur un hover
Bonjour.
Je suis en train de créer un forum rpg et comme il s'agit d'un "établissement", j'ai créé un plan qui s'affiche à plusieurs endroits sur une ma page d'accueil où se trouve les forums et les catégories. Comme il s'agit d'images que je suis parvenu à masquer, une seule s'affiche à la fois sans que ça ne me pose de problème.
Mon problème, c'est que je souhaite modifier ce plan (affiché en background-image, donc modifier soit le div, soit l'image de fond) lorsque ma souris passe sur un div en particulier.
Comme c'est le plan d'un établissement, je souhaite que l'image "neutre" du plan se change en une autre image qui éclaire une pièce lorsque la souris passe sur "les cuisines". La même chose pour une autre pièce comme les dortoirs ou le réfectoire. C'est l'idée de base.
Voici l'arbre généalogique d'une partie de mon code :
Comme vous le voyez, les div "cuisines, dortoirs" ne peuvent pas interagir avec le div ".ca-plan" puisqu'ils sont bien loin d'être adjacent ou sélectionables via le Css.
J'ai essayer plusieurs façon d'atteindre ".ca-plan" et de le modifier sur un hover avec ce procédé :
Mais ça n'a jamais fonctionné... et comme je me débrouille vraiment mal en Javascript et que je ne suis bon qu'à modifier des valeurs d'un code déjà tout fait (je ne connais pas la syntaxe pour le développement), et bien ça ne fonctionne pas !
Y aurait-il quelqu'un d'assez dégourdi et maître de ce langage pour m'aider ?
Merci d'avance, en espérant avoir bien exposé mon problème !
EDIT : Je suis parvenu à un résultat ici : http://jsfiddle.net/YBJHP/331/
Qui ne fonctionne malheureusement pas une fois intégré sur mon forum. Peut-être faut-il une autre manière de le faire ?
Je suis en train de créer un forum rpg et comme il s'agit d'un "établissement", j'ai créé un plan qui s'affiche à plusieurs endroits sur une ma page d'accueil où se trouve les forums et les catégories. Comme il s'agit d'images que je suis parvenu à masquer, une seule s'affiche à la fois sans que ça ne me pose de problème.
Mon problème, c'est que je souhaite modifier ce plan (affiché en background-image, donc modifier soit le div, soit l'image de fond) lorsque ma souris passe sur un div en particulier.
Comme c'est le plan d'un établissement, je souhaite que l'image "neutre" du plan se change en une autre image qui éclaire une pièce lorsque la souris passe sur "les cuisines". La même chose pour une autre pièce comme les dortoirs ou le réfectoire. C'est l'idée de base.
Voici l'arbre généalogique d'une partie de mon code :
- Code:
<div class="ca-item">
<div class="ca-item-main">
<img src="SOURCE" />
<div class="ca-plan"></div>
<h3><a href="LIEN">TEXTE</a><br /></h3>
<div>TEXTE</div>
<a href="#" class="ca-more">more...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<div class="cuisine">CUISINES</div>
<div class="DORTOIRS">DORTOIRS</div>
</div>
</div>
</div>
</div>
Comme vous le voyez, les div "cuisines, dortoirs" ne peuvent pas interagir avec le div ".ca-plan" puisqu'ils sont bien loin d'être adjacent ou sélectionables via le Css.
J'ai essayer plusieurs façon d'atteindre ".ca-plan" et de le modifier sur un hover avec ce procédé :
- Code:
$('.cuisine').hover(function () {
$(this).parentsUntil('.ca-item').children('.ca-item-main').find('.ca-plan').css('background-image', 'image1');
;
},
function(){
$(this).parentsUntil('.ca-item').children('.ca-item-main').find('.ca-plan').css('background-image', 'image_de_base');
});
Mais ça n'a jamais fonctionné... et comme je me débrouille vraiment mal en Javascript et que je ne suis bon qu'à modifier des valeurs d'un code déjà tout fait (je ne connais pas la syntaxe pour le développement), et bien ça ne fonctionne pas !
Y aurait-il quelqu'un d'assez dégourdi et maître de ce langage pour m'aider ?
Merci d'avance, en espérant avoir bien exposé mon problème !
EDIT : Je suis parvenu à un résultat ici : http://jsfiddle.net/YBJHP/331/
Qui ne fonctionne malheureusement pas une fois intégré sur mon forum. Peut-être faut-il une autre manière de le faire ?
Dernière édition par Oyo le Dim 9 Déc 2012 - 20:20, édité 1 fois
Oyo- ****
-
Messages : 251
Inscrit(e) le : 24/12/2005
Re: Modifier toutes les classes (externes, internes) de la page sur un hover
Trouvé, après maints essais.
À archiver.
- Code:
<script>
$('.cuisine').hover(function () {
$(this).parentsUntil('body').find('.ca-icon').css('background-image', 'url(http://i44.servimg.com/u/f44/16/34/55/88/cuisin12.png)');
;
},
function(){
$(this).parentsUntil('body').find('.ca-icon').css('background-image', 'url(http://i44.servimg.com/u/f44/16/34/55/88/plan12.png)');
});
</script>
À archiver.
Oyo- ****
-
Messages : 251
Inscrit(e) le : 24/12/2005
Sujets similaires
» Creer une liste de tous les sujets internes sur une page html
» Modifier un code pour lier le profil au hover de l'avatar
» Modifier apparence de toutes les zones de saisie
» Déformation page > profil messages en hover
» modifier toutes les scrollbars (via script)
» Modifier un code pour lier le profil au hover de l'avatar
» Modifier apparence de toutes les zones de saisie
» Déformation page > profil messages en hover
» modifier toutes les scrollbars (via script)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum