Ce tutoriel a été publié par final-blond sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Hello Folks,

Une petite astuce qui permet de mettre les détails pseudo, rangs et plus dans une pop up avec un code d'opacité repris d'ici, le tout en mode over.
Pour se rendre compte de l'effet voici ce que ça donne ici

Avant tout, il faut être en phpBB2 et être l'AF.

Le CSS (je vais essayer de le faire à la façon ze_chaofan) :

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS pour l'image élargie*/
position: absolute;
background-color: #transparent;
background-image: url('URL_IMAGE');
padding: 3px;
left: -1000px;
border: 2px solid #ffffff;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS pour l'image élagie*/
border-width: 0px;
padding: 2px;
}

.thumbnail:hover span{ /*CSS pour l'image élarigie over*/
visibility: visible;
top: 52px;
left: 34px; /*position où l'image élargie doit s'établir */
width: 100%;
}

/* IMGUSER OPACITE */

a imguser {
border: none;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
background-color: transparent;
}

a:hover imguser {
border: none;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
background-color: transparent;
}

imguser {
border: none;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
background-color: transparent;
}

imguser:hover{
border: none;
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
background-color: transparent;
}

.imguserborder:hover{
color: white; /* Dummy definition to overcome IE bug */
}

.p13 {color:#52050e; font-family: Georgia; font-size: 09pt;}

En vert : Tout les fonds de la popup en over.
En orange : La position de la popup par rapport à l'avatar. Il faut que la popup touche l'avatar sinon on peut établir l'over sur la popup. Plus la valeur est grande, plus elle s'éloigne de l'avatar.
En rouge : L'attribut pour le texte de la popup.
Bien sûr vous pouvez adapter le padding. border, etc, slon vos goûts.

Le code d'opacité est celui de ce tuto

Maintenant rendez-vous dans le template :
PA >> Affichage >> Templates >> Général > viewtopic_body
Chercher (Ctrl+F) pour les SF-BB :

Code:

{postrow.displayed.POSTER_AVATAR}<br /><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>
         <span class="postdetails poster-profile">
            <br />{postrow.displayed.POSTER_RANK}<br />

Remplacert par :

Code:

<div class="thumbnail">{postrow.displayed.POSTER_AVATAR}<br />
<span><div class="p13" align="center"><imguser><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong>         
            <br />{postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}<br />{postrow.displayed.POSTER_AVATAR}</imguser></div></span></div></div><br />

Le fait d'avoir remis l'avatar dans la pop up n'est qu'à titre d'exemple bien sûr... Pour l'enlever, il suffit de supprimer le <br />avant, et le deuxième {postrow.displayed.POSTER_AVATAR}

Comme vous le constatez l'attribut d'opacité et repris pour la pop up et non pour l'avatar.
Si vous le voulez pour l'avatar, il suffit de placer les balises <imguser> avant et après :

Code:

<div class="thumbnail"><imguser>{postrow.displayed.POSTER_AVATAR}</imguser>

<div class="thumbnail"> restant là puisqu'il désigne l'image (ou autre) qui recevra la pop up.
(ProgVal je sais que ce n'est pas conforme, mais ça ne fonctionne ainsi de ce que j'ai pu essayer, et ça fonctionne^^)


Pour phpBB2 et pour les images simples à la suite.

ProgVal, c'est un onglet, une pop up, une fenêtre qui s'ouvre par un over, quoi...


Pour phpBB2 standart c'est un peu plus compliqué...
Si on veut le même effet que l'exemple au dessus, il faut d'abord intervertir la place du pseudo et du rang :

Pour le CSS même chose qu'au dessus.

Rendez-vous dans le même template > Général > viewtopic_body
Chercher :

Code:

<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}

Remplacer par :

Code:

<div class="thumbnail">{postrow.displayed.POSTER_AVATAR}<br />
<span><div class="p13" align="center"><imguser><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong>         
            <br />{postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}</imguser></div></span></div>

Mais je ne garantis de rien, ayant la version SF-BB et considérablement modifiée au niveau de tous les templates et du CSS.
Le mieux est de faire des essais dans cette zone du template indiqué.


Pour le même effet sur une image simple (avec l'opacité sur l'image) dans le message d'accueil ou dans une page HTML, pour bien maitriser la pop up (surtout s'il y a plusieures images), il vaut mieux les mettre dans une table, par exemple ici avec deux images comme ici :

Code:

<table border="0">
<tbody><tr><td>
<div class="thumbnail"><imguser><img src="http://img37.imageshack.us/img37/6079/finalblond.gif" witdh="52" height="70"></imguser>
<span><img src="http://img37.imageshack.us/img37/276/finalblond1.jpg" witdh="52" height="70"><br />
<div class="p13">final-blond<br /><a href="http://www.sos-forum.com/profile.forum?mode=viewprofile&u=128" target="_blank">voir profil</a><br />
<a href="http://www.sos-forum.com/msg.forum?mode=post&u=128" target="_blank">envoyer mp</a></div></span></div></td>
<td>
<div class="thumbnail"><imguser><img src="http://img3.imageshack.us/img3/2299/9841s.jpg" witdh="52" height="70"></imguser>
<span><img src="http://chezminette87.c.h.pic.centerblog.net/zx0wz68s.jpg" witdh="52" height="70"><br />
<div class="p13">ProgVal<br /><a href="http://www.sos-forum.com/profile.forum?mode=viewprofile&u=98"_blank">voir profil</a><br />
<a href="http://www.sos-forum.com/msg.forum?mode=post&u=98" target="_blank">envoyer mp</a></div></span></div></td>
</tr></tbody></table>

Sinon pour juste une image, on reprend les codes sans les balises du tableau, seulement attention d'adapter la largeur (width) dans le CSS de la pop up ici en marron :

.thumbnail:hover span{ /*CSS pour l'image élarigie over*/
visibility: visible;
top: 52px;
left: 34px; /*position où l'image élargie doit s'établir */
width: 100%;

Voilà.