Petit + pour la page d'acceuil

2 participants

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

Résolu Petit + pour la page d'acceuil

Message par lovebeatrizluengo Jeu 17 Fév 2011 - 14:30

Bonjour, voila j'aimerais savoir comment c'est possible de faire comme ce forum ?
http://coin-pub.actifforum.com/t37210-wonderland-graphics
Lorsque vous passez le curseur sur un avatar ou icone cela fait apparet un petite fenetre avec le descriptif de la personne. Ou que que la luminositer change.







Dernière édition par lovebeatrizluengo le Dim 20 Fév 2011 - 20:23, édité 1 fois
lovebeatrizluengo

lovebeatrizluengo
****

Féminin
Messages : 299
Inscrit(e) le : 27/12/2005

http://passionasia.1fr1.net
lovebeatrizluengo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par Lunathiel Jeu 17 Fév 2011 - 17:05

Il s'agit d'une infobulle

je te cherche le message je l'ai demandé il n'y a pas longtemps

https://forum.forumactif.com/t296218-explication-d-un-css-pour-cree-une-infobulle

Sinon cherche "comment créer une infobulle" beaucoup de monde le demande je suis sure que tu peux trouver ton bonheur
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par lovebeatrizluengo Jeu 17 Fév 2011 - 17:15

Il faut que je mettent le script la:

Code:
.infobulle{
position: relative;
z-index: 0;}

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

.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infobulle span img{
border: 2px;
padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}

Mais quand je lai mis dans ma feuille CSS sa ne marche pas
lovebeatrizluengo

lovebeatrizluengo
****

Féminin
Messages : 299
Inscrit(e) le : 27/12/2005

http://passionasia.1fr1.net
lovebeatrizluengo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par Lunathiel Jeu 17 Fév 2011 - 17:28

Il faut ajouter ceci....

<div class="infobulle">IMAGE<div>CONTENU DE L INFOBULLE></div></div>

Que voulez vous exactement? Ceci serait pour votre page d'accueil?


Dernière édition par Lunathiel le Jeu 17 Fév 2011 - 17:29, édité 1 fois
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par lovebeatrizluengo Jeu 17 Fév 2011 - 17:29

Oui
lovebeatrizluengo

lovebeatrizluengo
****

Féminin
Messages : 299
Inscrit(e) le : 27/12/2005

http://passionasia.1fr1.net
lovebeatrizluengo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par Lunathiel Jeu 17 Fév 2011 - 17:40

Il me faudrait quelques info en plus et je vous réalise ça

- Pourrais-je avoir une image (sur laquelle on passera la souris pour voir apparaitre l'infobulle)
- Voulez vous une seconde image dans la "petite fenêtre" qui s'ouvrira?
- Voulez vous des coins arrondis?
- Quel couleur souhaiteriez vous?

J'ai déjà créer ceci

Pour votre page d'acceuil

Code:
  <table>
 
  <tr><td><div class="infobulle">
  <img src="http://img254.imageshack.us/img254/5703/ghgh.png">
    <span>
    <img src="http://img254.imageshack.us/img254/5703/ghgh.png"><br />
    NOM DU MEMBRE DU STAFF<br />
    RANG DANS LE STAFF<br />
    <a href="LIEN DU PROFIL" target="_blank">Profil</a>
    </span></div></td>
 
<td><div class="infobulle">
  <img src="VOTRE IMAGE">
    <span>
    <img src="VOTRE SECONDE IMAGE"><br />
    NOM DU MEMBRE DU STAFF<br />
    RANG DANS LE STAFF<br />
    <a href="LIEN DU PROFIL" target="_blank">Profil</a>
    </span></div></td>
 
  <td><div class="infobulle">
  <img src="VOTRE IMAGE">
    <span>
    <img src="VOTRE SECONDE IMAGE"><br />
    NOM DU MEMBRE DU STAFF<br />
    RANG DANS LE STAFF<br />
    <a href="LIEN DU PROFIL" target="_blank">Profil</a>
    </span></div></td>
 
 

</tr>
  <td><div class="infobulle">
  <img src="VOTRE IMAGE">
    <span>
    <img src="VOTRE SECONDE IMAGE"><br />
    NOM DU MEMBRE DU STAFF<br />
    RANG DANS LE STAFF<br />
    <a href="LIEN DU PROFIL" target="_blank">Profil</a>
    </span></div></td>
 
  <td><div class="infobulle">
  <img src="VOTRE IMAGE">
    <span>
    <img src="VOTRE SECONDE IMAGE"><br />
    NOM DU MEMBRE DU STAFF<br />
    RANG DANS LE STAFF<br />
    <a href="LIEN DU PROFIL" target="_blank">Profil</a>
    </span></div></td>
 
  <td><div class="infobulle">
  <img src="VOTRE IMAGE">
    <span>
    <img src="VOTRE SECONDE IMAGE"><br />
    NOM DU MEMBRE DU STAFF<br />
    RANG DANS LE STAFF<br />
    <a href="LIEN DU PROFIL" target="_blank">Profil</a>
    </span></div></td></tr>
</table>
 

et le css associé

Code:
/*--------Infobulle------------*/
div.infobulle {
  position: relative;
  background-color: #FFF; /*COULEUR DE FOND*/
  color: black; /*COULEUR DE TEXTE*/
  border: 2px solid #000; /*TAILLE DE BORDURE ET COULEUR*/
  width:100px;     
height:100px;
}

div.infobulle span {
  display: none;
}

div.infobulle:hover {
  background: none;
  z-index: 999;
}

div.infobulle:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 5px;
  left: 15px;
  background-color: #FFF; /*COULEUR DE FOND*/
  color: black; /*COULEUR DE TEXTE*/
  padding: 2.5px;
  text-align: center;
  border: 2px solid #000; /*TAILLE DE BORDURE ET COULEUR*/
}

Dites moi ce que vous voulez changer...


Dernière édition par Lunathiel le Jeu 17 Fév 2011 - 18:01, édité 1 fois
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par lovebeatrizluengo Jeu 17 Fév 2011 - 18:00

Ben je veut le meme type que mon forum il faut que sa soit moi qui face l image ??
lovebeatrizluengo

lovebeatrizluengo
****

Féminin
Messages : 299
Inscrit(e) le : 27/12/2005

http://passionasia.1fr1.net
lovebeatrizluengo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par Lunathiel Jeu 17 Fév 2011 - 18:03

Il faut que vous ayez sous la main les images que vous souhaitez mettre... ou tout du moins leurs liens... Je peux vous aidez mais il me faut un maximum d'information...
Pourrais-je voir le forum où vous voulez mettre ceci
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par lovebeatrizluengo Jeu 17 Fév 2011 - 18:03

lovebeatrizluengo

lovebeatrizluengo
****

Féminin
Messages : 299
Inscrit(e) le : 27/12/2005

http://passionasia.1fr1.net
lovebeatrizluengo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par Lunathiel Jeu 17 Fév 2011 - 18:29

J'ai réalisé ceci sur mon forum test

Qu'en dites vous??? (la couleur du lien"profil" ainsi que la couleur d'opacité s'adaptera avec la couleur de votre forum)

Cela vous plait que dois-je changer ou ajouter???

http://flyforum.forumactif.com/
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par lovebeatrizluengo Jeu 17 Fév 2011 - 19:18

ca ma l air bien mais quand je passe la souris dessus la petite fenetre est couper par le cadre
lovebeatrizluengo

lovebeatrizluengo
****

Féminin
Messages : 299
Inscrit(e) le : 27/12/2005

http://passionasia.1fr1.net
lovebeatrizluengo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par Lunathiel Jeu 17 Fév 2011 - 19:54

Par le cadre? Quel cadre??? Le fond c'est juste une question de taille regarde
Ici je l'ai fait volontairement plus large...
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par lovebeatrizluengo Jeu 17 Fév 2011 - 21:25

Non mais la l infobulle je ne la voi pas, elle est cacher
lovebeatrizluengo

lovebeatrizluengo
****

Féminin
Messages : 299
Inscrit(e) le : 27/12/2005

http://passionasia.1fr1.net
lovebeatrizluengo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par Lunathiel Jeu 17 Fév 2011 - 22:39

Tu utilises quel navigateur? Firefox, chrome, explorer???
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par Lunathiel Ven 18 Fév 2011 - 12:08

Écoutez je vais vous donnez mon code tel quel.. Le seul problème c'est qu'il ne fonctionne pas sous internet explorer... Il faudra revoir ce code par quelqu'un d'autre pour le faire fonctionner sous ce navigateur.

Sous firefox (que je vous conseille grandement) il fonctionne parfaitement.
N'ayant encore jamais fait réellement de code sous internet explorer je ne saurais pas vous aidez plus (c'est pas faute d'avoir essayé)

Voila pour votre page d'accueil
Code:
 <table>
 
  <tr><td><div class="infobulle">
  <img src="http://r27.imgfast.net/users/2711/32/60/41/avatars/1-84.jpg">
    <span>
 <img src="http://r27.imgfast.net/users/2711/32/60/41/avatars/1-84.jpg">

        MissYuna

    ADMIN

    <a href="http://culturemanga.forums-actifs.com/u1" target="_blank">Profil</a>
    </span></div></td>
 
<td><div class="infobulle">
  <img src="http://i79.servimg.com/u/f79/14/59/60/98/corali10.png">
    <span>
    <img src="http://i79.servimg.com/u/f79/14/59/60/98/corali10.png">

    Coralie

    CO-ADMIN

    <a href="http://culturemanga.forums-actifs.com/u3" target="_blank">Profil</a>
    </span></div></td>
 
 
 

</tr>
  <td><div class="infobulle">
  <img src="VOTRE IMAGE">
    <span>
    <img src="VOTRE SECONDE IMAGE">

    NOM DU MEMBRE DU STAFF

    RANG DANS LE STAFF

    <a href="LIEN DU PROFIL" target="_blank">Profil</a>
    </span></div></td>
 
  <td><div class="infobulle">
  <img src="VOTRE IMAGE">
    <span>
    <img src="VOTRE SECONDE IMAGE">

    NOM DU MEMBRE DU STAFF

    RANG DANS LE STAFF

    <a href="LIEN DU PROFIL" target="_blank">Profil</a>
    </span></div></td>
 
</tr>
</table>

et pour votre css


Code:
/*--------Infobulle------------*/
div.infobulle {
  position: relative;
  background-color: #7a7585; /*COULEUR DE FOND*/
  color: black; /*COULEUR DE TEXTE*/
 border: 3px solid #fed3b1; /*TAILLE DE BORDURE ET COULEUR*/
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
padding:10px;
-khtml-opacity:.8;
-moz-opacity:.8;
filter:alpha(opacity=80);
opacity:.8;
}

div.infobulle span {
  display: none;
}

div.infobulle:hover {
background:none;
  background-color: #7a7585; /*COULEUR DE FOND*/
  z-index: 999;
 border: 3px solid #fed3b1; /*TAILLE DE BORDURE ET COULEUR*/
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
padding:10px;
-khtml-opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}

div.infobulle:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 50px;
  left: 55px;
  background-color: #7a7585; /*COULEUR DE FOND*/
  color: #101333; /*COULEUR DE TEXTE*/
  font-size:14px;
  font-weight:normal;
 text-shadow: #000 2px 2px 2px;
  padding: 3px;
  text-align: center;
  border: 3px solid #fed3b1; /*TAILLE DE BORDURE ET COULEUR*/
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
padding:10px;
}


Et voila en image ce que ça donne, je rappelle que l'opacité verte, le fond et le lien s'harmonisera avec la couleur de votre forum
Petit + pour la page d'acceuil Infobu10

et au passage de la souris

Petit + pour la page d'acceuil Infobu11
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit + pour la page d'acceuil

Message par lovebeatrizluengo Dim 20 Fév 2011 - 20:23

Je suis sous esplorer!
Merci beaucoup !!!
lovebeatrizluengo

lovebeatrizluengo
****

Féminin
Messages : 299
Inscrit(e) le : 27/12/2005

http://passionasia.1fr1.net
lovebeatrizluengo a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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