Alors ce n'est pas très complexe, et nous allons en profiter pour nettoyer ton code...
Le HTML, la structure
Actuellement, tu as ceci :
- Code:
-
<table>
<td>
<div class="PA">
<p class="infobulle">
<img src="http://i.imgur.com/GcwBz.png" alt="NomDuForum" />
<span><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2006-16-b-mini_thumb.jpg" style="float: left; margin-right
: -10px;" /> Nom Du Forum<br /><a href="#">Sa fiche</a> • <a href="#">Visiter ?</a> </span>
</p>
<p class="infobulle">
<img src="http://i.imgur.com/GcwBz.png" alt="NomDuForum" />
<span><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2006-16-b-mini_thumb.jpg" style="float: left; margin-right
: -10px;" /> Nom Du Forum<br /><a href="#">Sa fiche</a> • <a href="#">Visiter ?</a> </span>
</p>
<p class="infobulle">
<img src="http://i.imgur.com/GcwBz.png" alt="NomDuForum" />
<span><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2006-16-b-mini_thumb.jpg" style="float: left; margin-right
: -10px;" /> Nom Du Forum<br /><a href="#">Sa fiche</a> • <a href="#">Visiter ?</a> </span>
</p>
<p class="infobulle">
<img src="http://i.imgur.com/GcwBz.png" alt="NomDuForum" />
<span><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2006-16-b-mini_thumb.jpg" style="float: left; margin-right
: -10px;" /> Nom Du Forum<br /><a href="#">Sa fiche</a> • <a href="#">Visiter ?</a> </span>
</p>
<p class="infobulle">
<img src="http://i.imgur.com/GcwBz.png" alt="NomDuForum" />
<span><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2006-16-b-mini_thumb.jpg" style="float: left; margin-right
: -10px;" /> Nom Du Forum<br /><a href="#">Sa fiche</a> • <a href="#">Visiter ?</a> </span>
</p>
<span>thème par Malice. <a href="#" class="a_PA">Plus de crédits ?</a></span></div>
</td>
</table>
Premier problème majeur : tu te sers de
<table> dont nous pouvons aisément nous passer. Cela gène la mise en page plus qu'autre chose dans ton CSS.
Nous pouvons déjà partir sur une structure qui débuterais ainsi :
- Code:
-
<div class="pa">
...
</div>
Ensuite, nous avons 3 types d'éléments (3 blocs) dans ta PA :
- La légende (tout en bas)
- Les "infobulles" (les petits bonhommes cliquables)
- Le placeholder de tes infobulles (là où les infobulles doivent s'afficher, ton cadre)
Cela nous donne la structure suivante :
- Code:
-
<div class="pa">
<!-- Le placeholder -->
<div id="infobulle-placeholder" class="visibility-hidden">
<!-- C'est ici que viendra s'afficher le texte de chaque infobulle -->
</div>
<!-- Infobulles -->
<p class="pa-infobulle">
<img src="http://i.imgur.com/GcwBz.png" alt="NomDuForum" />
<span>
<!-- Contenu de l'infobulle -->
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2006-16-b-mini_thumb.jpg" class="img-partners clearfix" /> Nom Du Forum 1<br />
<a href="#">Sa fiche</a> • <a href="#">Visiter ?</a>
</span>
</p>
<!-- Légende de la PA -->
<div class="pa-legend center">
thème par Malice. <a href="#">Plus de crédits ?</a>
</div>
</div>
Tu remarquera que j'ai rajouté un certain nombre de classes, qui nous serviront dans la partie suivante : le CSS.
Il ne te reste plus qu'à multiplier les infobulles en copiant/collant la structure :
- Code:
-
<p class="pa-infobulle">
<img src="http://i.imgur.com/GcwBz.png" alt="NomDuForum" />
<span>
<!-- Contenu de l'infobulle -->
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2006-16-b-mini_thumb.jpg" class="img-partners clearfix" /> Nom Du Forum 1<br />
<a href="#">Sa fiche</a> • <a href="#">Visiter ?</a>
</span>
</p>
Le CSS, mise en forme
Pour rappel, ton CSS ressemblait à ça :
- Code:
-
/********PA********************/
.PA {
display: block;
background: url(http://i.imgur.com/Tsf3q.png);
width: 730px;
height: 135px;
font: 11px verdana;
color: white;
}
.PA span {
display: block;
position: relative;
top: 101px;
left: -15px;
}
.PA p {
display: block;
position: relative;
left: 444px;
top: 45px;
}
.infobulle { position: relative; float:left; }
.infobulle span { display: none; /* ceci masque l'infobulle */}
.infobulle:hover { background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
.infobulle:hover span {
display: block;
position: absolute;
z-index: -1;
top: -34px;
left: 9px;
width: 233px;
background: #E1D8D0;
border: none;
text-align: center;
}
/********FIN PA************/
Le problème c'est que ce n'est pas très lisible, qu'il y a quelques répétitions et effets qui s'enchevêtrent, ce qui rend compliqué la maintenance de ce code (donc du style de ta PA et de l'effet rendu désiré). C'est la raison pour laquelle tu n'arrive pas à changer l'effet par défaut de l'infobulle (y'a du :hover qui rentre en jeu un peu partout et tu ne peux pas juste les supprimer au risque de tout casser).
Si je liste les classes dont je me sers, j'ai quelque chose de plus clair (plus "sémantique") et plus flexible :
.pa,
.pa-legend,
.pa-infobulle,
.img-partners,
#infobulle-placeholder et un petit
.visibility-hidden dont je vais t'expliquer l'intérêt.
Tout d'abord,
j'ai repris la structure que tu avais en simplifiant le CSS et en changeant le nom des classes pour quelque chose de plus clair. On parle de
.pa-legend qui réfère au bloc contenant la légende de ta PA alors qu'auparavant cela correspondait à un
span (donc le style de ta légende rentrait en conflit avec les autres
span de ta PA... qui se trouvaient être tes infobulles !).
J'ai utilisé un identifiant
#infobulle-placeholder dont le nom parle de lui-même.
Techniquement,
je conseille de préférer utiliser les classes plutôt que les identifiants dans le CSS (car on peut réutiliser éventuellement des classes, mais jamais les identifiants, du point de vue du CSS seul donc cela justifie mon propos).
Simplement,
le choix de l'identifiant est justifié ici par le JS. J'ai besoin d'identifier un bloc unique sur la page où je vais injecter le contenu de l'infobulle cliquée : c'est ce qui justifie mon bloc identifié par
#infobulle-placeholder. Je le personnalise simplement quelque peu dans mon CSS, c'est la seule raison valable (à mon sens) pour avoir un identifiant dans le CSS.
J'ai créé une classe
.visibility-hidden utilitaires qui permet d'appliquer un
état à l'élément auquel il est attaché. Cela va extrêmement me servir en JS quand je voudrais cacher ou non un élément : je n'ai qu'à lui ajouter/enlever la classe et c'est réglé !
Le code est le suivant :
- Code:
-
.visibility-hidden {
visibility: hidden;
}
Pour info, je me sers également de .clearfix et .center qui sont des classes utilitaires qui existent déjà sur FA. Ce tutoriel explique l'intérêt du premier sur des éléments flottants (vers la fin) ; la seconde classe permet d'appliquer un text-align: center; à l'élément auquel il est attribué (raison pour laquelle il n'y a pas de justification à utiliser la balise obsolète <center>).
Finalement, voici le code CSS :
- Code:
-
/******** DEBUT PA *******/
.pa {
background-image: url(http://i.imgur.com/Tsf3q.png);
width: 730px;
height: 135px;
font: 11px verdana;
color: white;
}
.pa-legend {
margin-top: 50px;
}
.pa-infobulle {
display: inline-block;
position: relative;
left: 444px;
top: 45px;
}
.pa-infobulle span {
display: none; /* ceci masque l'infobulle */
}
.img-partners {
float: left;
margin-right: 10px;
}
#infobulle-placeholder {
position: relative;
top: 22px;
left: 450px;
height: 40px;
width: 222px;
background-color: #e6dbd3;
}
/******** DEBUT PA *******/
.visibility-hidden {
visibility: hidden;
}
Il n'est pas vraiment plus long que le tien mais il est clair et simple (à comprendre et donc à personnaliser/modifier).
Le JS, l'effet désiré
Maintenant qu'on a notre structure et notre design, il ne reste plus qu'à appliquer le comportement.
Ce que l'on veut, si je résume bien, c'est :
- Citation :
- Lorsque l'on clique sur une image, le texte de l'infobulle correspondante apparaisse dans le cadre prévu à cet effet.
Si je le traduit par rapport à notre code, cela donne :
- Citation :
- Lorsqu'on clique sur un élément qui porte la classe
.pa-infobulle, il faut que l'élément #infobulle-placeholder s'affiche (perde sa classe .visibility-hidden) et contienne le texte de l'infobulle cliquée.
Et bien le code JS va être la juste traduction de cela, en très peu de ligne. En effet, ForumActif te permet de créer des scripts JS qui seront chargés sur ton forum.
Rends-toi dans
Pannea d'Administration > Modules > Gestion des codes javascript, crée un nouveau code. Nomme le "
infobulles-pa" (par exemple) et soit bien sûr de sélectionner les pages où il doit s'exécuter (toutes les pages dans le doute, la page d'accueil devrait suffire cela dit).
Le code doit être entouré par ceci :
- Code:
-
$(function() {
// Notre code va aller ici...
});
Cela permet juste d'être sûrs et certains que le code s'exécutera une fois la page chargée (sinon ça peut ne pas fonctionner).
Le code est le suivant :
- Code:
-
$('.pa-infobulle').click(function() {
var fiche = $(this).find('span').html();
$('#infobulle-placeholder').html(fiche)
.removeClass('visibility-hidden');
});
Ces 5 petites lignes permettent de faire ce que l'on veut. Voici l'explication détaillée :
-
$('.pa-infobulle').click(function() { ... } va déclencher ce qu'il contient lorsqu'on cliquera sur un élément portant la classe .pa-infobulle
-
var fiche = $(this).find('span').html(); va simplement récupérer le contenu du span de l'élément cliqué (donc le code de l'infobulle).
-
$('#infobulle-placeholder').html(fiche) va placer le code récupéré au-dessus dans notre élément #infobulle-placeholder
-
.removeClass('visibility-hidden'); retire la classe qui masquait notre placeholder (c'est la suite de ce qu'il y a au-dessus, le retour à la ligne est juste là pour la lisibilité).
Voilà, je sais que je viens de te faire une réponse très longue mais étant donné que je t'ai codé ta demande (ce que nous ne faisons généralement pas) je voulais en profiter pour t'expliquer en détail le fonctionnement afin que tu comprenne, que tu sois en mesure de le modifier seule ou de le refaire plus tard
Tu peux constater l'effet de ce code sur cet exemple que j'ai mis en ligne.
Je reste à ta disposition si tu as des questions.
Lun 03 Juin 2024, 17:20 par 
