Sujets similaires

Sujet: Info bull sur image PA Jeu 24 Sep 2009, 12:05

Bonjour bonjour
Oui c'est encore moi XD
mais comme je suis en plein préparatif du prochain design de mon forum ben j'ai tout plein besoin de vous XD
Puis ça fait vivre le fow hein :p

Bon allez passons au chose sérieuse voici mon probléme en image tout d'abord:

Info bull sur image PA 14js3ee

J'ai vu sur un forum qu'il était possible de mettre les infobulles sur une image de page d'accueil
Mais es ce que quelqu'un pourrait il me dire comment?
car j'ai beau essayer de le mettre dans le code de la PA ... rien a faire il reste en dessous de tout -_-

merci a celui ou celle qui pourra m'aidai

Sujet: Re: Info bull sur image PA Jeu 24 Sep 2009, 13:43

Salut,

Tu parle des liens dans ton abnnière ? Dans ce cas il s'agit d'une image réactive.

Ou simplement des avatars en dessous qui au survbol affiche une fiche ?

Sujet: Re: Info bull sur image PA Jeu 24 Sep 2009, 13:44

je parle des image en dessous qui au passage affiche une fiche oui ^^

Sujet: Re: Info bull sur image PA Jeu 24 Sep 2009, 13:49

Un truc de ce genre :
http://css-forum.forumotion.com/Le-staff-h3.htm

Comment faire ?

On commence par mettre le CSS :
> Panneau d'admin
> Affichage
> Couleur
> Feuille de style CSS
> Vous collez le code suivant :

Code:: .tstaff{
font-size:1em;
}

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

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

.thumbnail span{
position: absolute;
background-color: #494747;
padding: 5px;
left: -1000px;
border: 1px groove #F0BF5D;
visibility: hidden;
color: #FFFFFF;
text-decoration: none;
}

.thumbnail span img{
border: 1px groove;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: 50px;
left: 25px; /*position where enlarged image should offset horizontally */
width: 160px
}

Ensuite, il vous reste a mettre la partie HTML ou vous le souhaitez :
Exemple d'un code pour 5 avatars :

Code:: <table><font color=green size=3><u>Le staff du forum</u></font><tr><td>
<td><div class="thumbnail"><img src="Lien avatar" style="width: 60px; height: 80px;" border="0"><span><div class="tstaff"><img src="Lien avatar" style="width: 150px; height: 200px;" border="0"><font color=#FF8403><b>Pseudo</b></font><br>rang<br><a href="Lien profil">Voir son profil</a><br><a href="Lien pour lui envoyez un MP">Lui envoyer un MP</a></div></span></div></td><td><div class="thumbnail"><img src="Lien avatar" style="width: 60px; height: 80px;" border="0"><span><div class="tstaff"><img src="Lien avatar" style="width: 150px; height: 200px;" border="0"><font color=#FF8403><b>Pseudo</b></font><br>rang<br><a href="Lien profil">Voir son profil</a><br><a href="Lien pour lui envoyez un MP">Lui envoyer un MP</a></div></span></div></td><td><div class="thumbnail"><img src="Lien avatar" style="width: 60px; height: 80px;" border="0"><span><div class="tstaff"><img src="Lien avatar" style="width: 150px; height: 200px;" border="0"><font color=#FF8403><b>Pseudo</b></font><br>rang<br><a href="Lien profil">Voir son profil</a><br><a href="Lien pour lui envoyez un MP">Lui envoyer un MP</a></div></span></div></td><td><div class="thumbnail"><img src="Lien avatar" style="width: 60px; height: 80px;" border="0"><span><div class="tstaff"><img src="Lien avatar" style="width: 150px; height: 200px;" border="0"><font color=#FF8403><b>Pseudo</b></font><br>rang<br><a href="Lien profil">Voir son profil</a><br><a href="Lien pour lui envoyez un MP">Lui envoyer un MP</a></div></span></div></td><td><div class="thumbnail"><img src="Lien avatar" style="width: 60px; height: 80px;" border="0"><span><div class="tstaff"><img src="Lien avatar" style="width: 150px; height: 200px;" border="0"><font color=#FF8403><b>Pseudo</b></font><br>rang<br><a href="Lien profil">Voir son profil</a><br><a href="Lien pour lui envoyez un MP">Lui envoyer un MP</a></div></span></div></td></tr></table>

Vous le placez sur la page d'accueil (en haut du forum) :
> Panneau d'admin
> Affichage
> Pager d'accueil
> Généralités
> Message sur la page d'accueil
> Vous collez le code que vous avez rectifié
> Vous enregistrez
Attention de veillez a ce que le HTML soit actif

Vous le placez sur une page html :
> Panneau d'admin
> Modules
> Html
> Gestion des page html
> Vous cliquez sur créez une page
> Vous la nommez
> Cochez au choix si vous souhaitez garder le haut et le bas
> Vous collez le code rectifié
> Vous validez

N'oubliez pas de personnaliser le CSS et le code en fonction de vos couleurs et/ou style d'écriture

Sujet: Re: Info bull sur image PA Jeu 24 Sep 2009, 14:11

Une fois de plus j'ai pas du bien m'expliquai et j'en suis désolé je te donne du travail pour rien

j'ai déja mon info bull de fais
mais sur ma page d'accueil j'ai mis une image et sur celle ci je voudrais déposer mes image avec infobull
un peu comme ici

http://n-y-c-l.forumsactifs.com/

tu vois les image du staff sont en infobull et ils sont sur le fond qu'elle a mis en pa
je voudrais savoir comment on fait pour les superposer

dans tout les cas merci de ton aide

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 05:08

Salut,

Le principe est le même sauf qu'il y a une opacité a régler sur l'ensemble du code.
Ce qui donne l'impression que cela fait partie d'un seul bloc.

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 05:11

je comprend pas trop la désolé :/
tu veux dire que l'infobull n'est en faite pas sur le fond?

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 05:12

NON je dis simplement que le code que j'ai donné plus haut fonctionne.
Ils ont mis ce code avec le reste pour créer le message de la page d'accueil.
Ensuite ils ont fait une opacité via CSS sur l'ensemble pour donner l'illusion que cela fait un seul et unique bloc.

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 05:13

ah ok
mais j'ai fais moi aussi un fond et mis le code mais rien a faire il ne veut pas se superposer :/

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 05:15

Voici la partie CSS du forum que tu cite en exemple qui gère le message d'accueil :

Code:: /* LE STAFF */
/*URL: http://www.dynamicdrive.com/style/ */

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

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

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #EFF2F1;
padding: 5px;
left: -1000px;
border: 2px solid #bdb2c2;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0px;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 53px;
left: 25px; /*position where enlarged image should offset horizontally */
width: 180px
}

/* IMGUSER OPACITE PAGE ACCUEIL */

a imguser {
border: none;
opacity: 0.5;
background-color: transparent;
}

a:hover imguser {
border: none;
opacity: 0.5;
background-color: transparent;
}

imguser {
border: none;
opacity: 0.5;
background-color: transparent;
}

imguser:hover{
border: none;
opacity: 1;
background-color: transparent;
}

/* BODY ACCUEIL */

.p13 {color:#718C91; font-family: Georgia; font-size: 08pt;}

/* OMBRE */

.forumline{
background-color: #bdb2c2;
-moz-border-radius: 0px 0px 14px 14px ;
border-bottom: 8px #bdb2c2 solid;
border-top: 1px #bdb2c2 dotted;
border-right: 1px #bdb2c2 solid;
border-left: 1px #bdb2c2 dotted;}

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 05:19

d'accord mais si je met ça sur mon css ça change rien -_-
jsuis désolé de t'ennuiais une fois de plus XD

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:04

Normal que ca fonctionne pas car il ne trouve rien dans ton message de la page d'accueil.
Bon allez je vais t'aider.

Mets moi le message de la page d'accueil dans sont intégralité.
Le code complet quoi.

Et aussi ce que tu souhaite exactement faire.

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:09

Alors voici ma page d'accueil
donc image d'arriére plan + lien
et mon info bull

Code:: <img name="accueil0" src="http://i25.tinypic.com/34hcbde.jpg" usemap="#accueil" border="0" height="489" width="830">

<map name="accueil">
<area shape="rect" coords="263,20,389,64" href="http://girlyacademy.allgoo.net/les-reglements-de-la-girly-academy-f1/" alt="Règlements">

<area shape="rect" coords="266,67,470,111" href="http://girlyacademy.allgoo.net/panneau-d-affichage-f2/" alt="Panneau d'affichage">

<area shape="rect" coords="266,113,441,149" href="http://girlyacademy.allgoo.net/aide-questions-f73/" alt="Aides & Questions">

<area shape="rect" coords="264,155,442,193" href="http://girlyacademy.allgoo.net/role-pre-defini-f51/" alt="Rôles Pré-Définis">

<area shape="rect" coords="265,198,472,239" href="http://girlyacademy.allgoo.net/recherche-pour-le-forum-f121/" alt="Recherches du forum">

<area shape="rect" coords="540,201,731,246" href="http://girlyacademy.allgoo.net/journal-de-la-girly-f87/" alt="Le journal du forum">

<area shape="rect" coords="543,251,728,290" href="http://girlyacademy.allgoo.net/animation-sur-le-forum-f49/" alt="Animations & Jeux">

<area shape="rect" coords="540,299,673,333" href="http://girlyacademy.allgoo.net/concours-girly-f17/" alt="Nos concours">

<area shape="rect" coords="540,340,751,382" href="http://girlyacademy.allgoo.net/internet-f18/" alt="Les articles de Gossip">

<area shape="rect" coords="541,385,740,422" href="http://girlyacademy.allgoo.net/les-defis-du-fofo-f73/" alt="Les défis du forum">

<area shape="rect" coords="265,198,472,239"><font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://i29.tinypic.com/21cfog3.jpg"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><font size="1">Zhadrryen</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i28.tinypic.com/2d183c.jpg"></a></td></tr><tr><td style="text-align: center;"><font size="1">MODERATEUR EN CHEF<br></font></td></tr><tr align="center"></tr></tbody></table></span></a><a class="imginfo"><span></span></a> <a class="imginfo"><font color="burlywood"><img src="http://i26.tinypic.com/2m7ania.jpg"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><font size="1">Shuya</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i27.tinypic.com/6z1w11.jpg"></a></td></tr><tr><td style="text-align: center;"><font size="1">MODERATEUR<br></font></td></tr><tr align="center"></tr></tbody></table></span></a><font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://i32.tinypic.com/2wowzd3.jpg"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><font size="1">Natsuko</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i28.tinypic.com/34rwqhe.jpg"></a></td></tr><tr><td style="text-align: center;"><font size="1">MODERATRICE<br></font></td></tr><tr align="center"></tr></tbody></table></span></a><font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://i25.tinypic.com/99m2dw.jpg"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><font size="1">Anna</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i27.tinypic.com/v6m7at.jpg"></a></td></tr><tr><td style="text-align: center;"><font size="1">MODERATRICE<br></font></td></tr><tr align="center"></tr></tbody></table></span></a><font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://i25.tinypic.com/260v8tx.jpg"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><font size="1">Axelle</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i30.tinypic.com/1gm87l.jpg"></a></td></tr><tr><td style="text-align: center;"><font size="1">MODERATRICE<br></font></td></tr><tr align="center"></tr></tbody></table></span></a><font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://i27.tinypic.com/30u4yog.jpg"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><font size="1">ELEA</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i28.tinypic.com/123nv6g.jpg"></a></td></tr><tr><td style="text-align: center;"><font size="1">MODERATRICE<br></font></td></tr><tr align="center"></tr></tbody></table></span></a><font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://i29.tinypic.com/zxjlt0.jpg"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><font size="1">NIALL</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i28.tinypic.com/2lxfij9.jpg"></a></td></tr><tr><td style="text-align: center;"><font size="1">MODERATEUR<br></font></td></tr><tr align="center"></tr></tbody></table></span></a><font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://i26.tinypic.com/a9wxe0.jpg"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><font size="1">SHINRAI</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://s3.tinypic.com/34448r6_th.jpg"></a></td></tr><tr><td style="text-align: center;"><font size="1">MODERATRICE<br></font></td></tr><tr align="center"></tr></tbody></table></span></a><font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://i25.tinypic.com/208txt4.jpg"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><font size="1">SAYA</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i25.tinypic.com/j98ysi.jpg"></a></td></tr><tr><td style="text-align: center;"><font size="1">MODERATRICE<br></font></td></tr><tr align="center"></tr></tbody></table></span></a><font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://i32.tinypic.com/11qskfq.jpg"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><font size="1">KRISTEN</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i25.tinypic.com/xfunvn.jpg"></a></td></tr><tr><td style="text-align: center;"><font size="1">MODERATRICE<br></font></td></tr><tr align="center"></tr></tbody></table></span></a>>
</map>

et voici ce que je veux obtenir (les images seront diminuer et celui en haut à droite il y aura moins d'image car ça sera les admins mais je n'est pas encore fait l'info bull)

Info bull sur image PA 2vnlvo9

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:16

Donc tu veux que je mappe l'image avec les liens vers le staff ?
Comme l'exemple ?

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:20

hee que tu map??
je veux juste mettre mon info bull la ou je l'est mit dans l'exemple :/

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:25

Oui donc le staff comme l'exemple ?
On appelle cela mapper une image ou la rendre réactive si tu veux.

Il s'agit de mettre des images avec lien sur une autre image de fond.
Comme le flash mais moins complexe.

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:29

ah oui désolé je comprenais pas XD
le codes pour la réaction des images est déjà donner dans la page d'accueil

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:31

Tu peux me mettre les avatars du staff sur l'image a l'endroit souhaité ?
J'aurais plus facile pour faire le code.

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:35

ben c'est ce que j'ai fais plus haut non?

je t'es même donner le code réaction sur image

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:39

Voilà ce que donne ton code :
http://css-forum.forumotion.com/forum.htm

C'est ca que tu veux ?

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:44

tu as mis le CSS pour que les image soit réactive?

Code:: a.imginfo {
position: relative;
color: #7d7d7d;
text-decoration: none;
border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
}

a.imginfo span {
display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 30px; /* on positionne notre infobulle */
left: 20px;
background: white;
color: 7d7d7d;
padding: 3px;
border: 0px solid grey;
border-left: 5px solid #b6b6b6;
border-right: 3px solid #b6b6b6;
border-top: 3px solid #b6b6b6;
border-bottom: 5px solid #b6b6b6;
}

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:45

Voilà mais je trouve bizarre le staff présenté comme ça.
C'est cette présentation que tu veux ?

Edit :
https://i.servimg.com/u/f82/13/62/58/03/sans_t14.jpg

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:47

bah oui pourquoi tu trouve cela bizarre?
enfin je le veux sur l'image au dessus quoi :/

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:48

Donc le staff et en dessous l'image ?

Sujet: Re: Info bull sur image PA Sam 26 Sep 2009, 06:50

lol on va réussir a ce comprendre
la il est dessous l'image mais moi je le veux comme l'exemple donner plus haut SUR l'image

Info bull sur image PA

Info bull sur image PA

Sujets similaires

Sujets similaires

Partenaires Or