Petit + pour la page d'acceuil

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

Résolu Petit + pour la page d'acceuil

Message par lovebeatrizluengo le 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
****

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 le 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

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

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

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

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 le Jeu 17 Fév 2011 - 17:29

Oui

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

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

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

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 le Jeu 17 Fév 2011 - 18:03

oui merci Smile
http://culturemanga.forums-actifs.com/

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

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

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

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 le Jeu 17 Fév 2011 - 21:25

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

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 le Jeu 17 Fév 2011 - 22:39

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

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 le 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


et au passage de la souris



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 le Dim 20 Fév 2011 - 20:23

Je suis sous esplorer!
Merci beaucoup !!!

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


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