Modifier toutes les classes (externes, internes) de la page sur un hover

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modifier toutes les classes (externes, internes) de la page sur un hover

Message par Oyo le Dim 9 Déc 2012 - 18:06

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 :
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
****

Masculin
Messages : 248
Inscrit(e) le : 24/12/2005

Oyo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier toutes les classes (externes, internes) de la page sur un hover

Message par Oyo le Dim 9 Déc 2012 - 20:20

Trouvé, après maints essais.

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

Oyo
****

Masculin
Messages : 248
Inscrit(e) le : 24/12/2005

Oyo a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum