Infobulle dans l'image

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

Résolu Infobulle dans l'image

Message par Shimurax3 le Mar 20 Aoû 2013 - 5:42

Bonjour tout le monde :3

Je sais qu'il y a des million de messages différents traitant le sujet, je les ai tous feuilletés et essayer certains codes sans que ça ne fonctionne. Ce que j'aimerais réaliser, c'est obtenir une infobulle pour la PA, mais je ne veux pas que le texte apparaisse à côté de l'image, mais bien DANS/SUR celle-ci.

J'avais déjà une infobulle d'installer, je vous passe le CSS, au cas où vous pourriez modifier à partir de ce que j'ai déjà.

CSS
Code:
/*INFOBULLES de la PA*/

a.imginfo {
position: relative;
color: black;
text-transform: uppercase;
font-family: Arial;
text-align: center;
font-size: 11px;
}

//////

a.imginfo span {
display: none;
-moz-border-radius: 0px 5px 0px 5px;
-webkit-border-radius: 0px 5px 0px 5px;
border-radius: 0px 5px 0px 5px;
}

a.imginfo hover {
background: none;
z-index: 999;
}

a.imginfo:hover span {
display: block;
position: absolute;
z-index: 999;
overflow: hidden !important;
white-space: normal;
top: 2px;
left: 2px;
text-align: center;
text-decoration: none !important;
width: 140px;
background: white ;
padding: 4px;
border: 3px solid #dbdbd7;
}
Merci beaucoup à celui ou celle qui m'apportera une aide précieuse. ~


Dernière édition par Shimurax3 le Mar 27 Aoû 2013 - 21:00, édité 1 fois

Shimurax3
**

Féminin
Messages : 60
Inscrit(e) le : 22/02/2011

http://soulmates-never-die.bbactif.com
Shimurax3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle dans l'image

Message par Shimurax3 le Mer 21 Aoû 2013 - 2:42

Un petit up pour ne pas disparaître dans les pages.

Shimurax3
**

Féminin
Messages : 60
Inscrit(e) le : 22/02/2011

http://soulmates-never-die.bbactif.com
Shimurax3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle dans l'image

Message par Matriochka le Mer 21 Aoû 2013 - 15:51

Bonjour,

Il suffit de jouer un peu avec les marges (margin), avec des marges négatives par exemple, etc.

Si tu ne sais pas faire, fais une petite recherche sur le forum, je crois savoir que certains ont déjà abordé le sujet Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle dans l'image

Message par Shimurax3 le Mer 21 Aoû 2013 - 16:40

Des margins... Ah, ça je connais! J'aurais du y penser XD
Je pensais qu'il y avait un code particulier. ~

Du coup, merciii beaucoup Matriochka ^_^


Shimurax3
**

Féminin
Messages : 60
Inscrit(e) le : 22/02/2011

http://soulmates-never-die.bbactif.com
Shimurax3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle dans l'image

Message par Matriochka le Mer 21 Aoû 2013 - 17:01

Mais de rien Smile

Si tu as pu résoudre le souci n'oublie pas de cocher l'icône résolu sur ton premier message. Sinon n'hésite pas à demander si tu as encore du mal avec cette infobulle

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle dans l'image

Message par Shimurax3 le Jeu 22 Aoû 2013 - 18:59

J'ai réussi à obtenir ce que je voulais, et à rendre le tout rond o/
SAUF QUE...
Le texte à mettre dans l'infobulle apparait en double... J'ai essayé de voir ce qui clochait, mais comme je ne fais que me débrouiller en codage, je ne suis arrivé à rien du tout.

Je mets ceci dans ma PA pour que ça apparaisse ;
Code:
<a class="imginfo"><div style="background-image : url(http://i73.servimg.com/u/f73/16/59/92/57/rond-e10.jpg); -webkit-border-radius: 75px 75px 75px 75px; -moz-border-radius: 75px 75px 75px 75px; border-radius: 75px 75px 75px 75px; height: 100px; width: 100px;"><br></br><span>Florian Darkwood <br>Présent<br> MP?</span>   </div></a>
Et voici les petites modifications apportées à mon CSS ;
Code:
a.imginfo {
position: relative;
color: black;
text-transform: uppercase;
font-family: Arial;
text-align: center;
font-size: 11px;
}

//////

a.imginfo span {
display: none;
-moz-border-radius: 75px 75px 75px 75px;
-webkit-border-radius: 75px 75px 75px 75px;
border-radius: 75px 75px 75px 75px;
}

a.imginfo hover {
background: none;
z-index: 999;
}

a.imginfo:hover span {
display: block;
position: absolute;
z-index: 999;
overflow: hidden !important;
white-space: normal;
top: 2px;
left: 2px;
text-align: center;
text-decoration: none !important;
width: 100px;
height: 100px;
background: dimgray;
padding: 4px;
margin: -8px;
border-radius: 75px 75px 75px 75px;
-moz-border-radius: 75px 75px 75px 75px;
-webkit-border-radius: 75px 75px 75px 75px;
}
Vous pouvez voir ce que ça donne sur mon forum de test (les petites bulles rondes en bas) ;
Forum de test

PS; Les bulles sont blanches pour l'instant, mais il y aura des images dedans prochainement...

Désolé, je suis nulle en codes X'D
Mercii encore pour l'aide apportée! ~

Shimurax3
**

Féminin
Messages : 60
Inscrit(e) le : 22/02/2011

http://soulmates-never-die.bbactif.com
Shimurax3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle dans l'image

Message par Shimurax3 le Sam 24 Aoû 2013 - 1:44

Un petit up si quelquun peut m'aider ^_^ ~
Je vais continuer mes essai/erreur de mon côté.

Shimurax3
**

Féminin
Messages : 60
Inscrit(e) le : 22/02/2011

http://soulmates-never-die.bbactif.com
Shimurax3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle dans l'image

Message par Shimurax3 le Lun 26 Aoû 2013 - 1:23

Petit up ~

Shimurax3
**

Féminin
Messages : 60
Inscrit(e) le : 22/02/2011

http://soulmates-never-die.bbactif.com
Shimurax3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle dans l'image

Message par Shimurax3 le Mar 27 Aoû 2013 - 21:00

J'ai fini par trouver ce qui clochait. o/
Je peux enfin clore ce sujet.

Merci beaucoup ~

Résolu!

Shimurax3
**

Féminin
Messages : 60
Inscrit(e) le : 22/02/2011

http://soulmates-never-die.bbactif.com
Shimurax3 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