| | Invité Voir le dossier scolaire | | |
 | | Sujet: <Astuce> Infos bulles Lun 23 Fév - 23:36 | |
| Bonjour, Parfois on voudrais que lorsque l'on passe la souris sur une image un texte apparaisse. C'est tout a fait possible grace a ce code : | Code: | <IMG src="Lien de l'image" width="177" height="115" title="TEXTE a mettre qui apparaitra" vspace="5" hspace="5" align="left"> |
Il faut remplacer :
- Lien de l'image par le lien de votre image
- Width : valeur en largeur
- Height : Valeur en hauteur
- Title : texte qui apparaitra en passant la souris
Voici un exemple :
Voilà a placer dans un message par exemple ou une page HTML ou autre
Olivier
[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici] |
|
| | La chouette 
Voir le dossier scolaire Doyenne  Rang spécial: Miss SoP 2010
Nombre de messages: 923
Age: 17
Localisation: Dans mon tee-shirt, ma tête dépasse --
$ops: 943
Points: 20
Date d'inscription: 16/05/2008
Distinctions: Gagnante du concours d'Halloween de 2009
| | |
| | Sujet: Re: <Astuce> Infos bulles Dim 4 Avr - 16:53 | |
| Hey ! Pour faire des infobulles comme sur l'accueil de SoP (les gagnants des concours), il suffit de mettre ce qu'on veut dans title=" ...." ou il y a une autre astuce ? |
|
| | Sujet: Re: <Astuce> Infos bulles Dim 4 Avr - 19:12 | |
| Il y a une autre astuce  avec du html et css Prenons le code de SoP au niveau des gagnants de concours (on ne va prendre qu'une seule image, le principe et le même pour tous ) | Code: | <a href="http://school-of-pub.top-forum.net/concours-jeux-f37/concours-express-tchou-tchou-t2383.htm" class="infobulle"><img src="http://i754.photobucket.com/albums/xx188/School_of_pub/gagnants_concours/concours_xjujuxleo.png" /><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><img src="http://school-of-pub.top-forum.net/users/1512/42/25/33/avatars/222-33.jpg" id="img_gagnant" /><br><p id="gagnant_concours"><a href="http://school-of-pub.top-forum.net/profile.forum?mode=viewprofile&u=222" target="_blank">xjujuxleo</a></p><p id="nom_concours">Gagnant du Concours Express<br />"Rapidité, agilité, adresse"</p></td></tr></tbody></table></span></a> |
Allons y point par point
| Code: | <a href="http://school-of-pub.top-forum.net/concours-jeux-f37/concours-express-tchou-tchou-t2383.htm" class="infobulle">...</a> |
Ici, on met le lien vers le sujet du jeu ( le "a" = lien) et on indique le nom de class que l'on donne à ce lien pour la mise en page (ici "infobulle")
| Code: | ...<img src="http://i754.photobucket.com/albums/xx188/School_of_pub/gagnants_concours/concours_xjujuxleo.png"/>... |
Ceci correspond à la miniature de l'avatar du gagnant.
| Code: | ...<span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;">....</td></tr></tbody></table></span> |
On prépare notre infobulle. Autrement dit, ce code correspond à la "boite" qui va contenir les infos. Pour pouvoir ajouter des liens sans souci, nous avons intégré un tableau (table) ainsi que des lignes (tr) et colonne (td).
| Code: | <img src="http://school-of-pub.top-forum.net/users/1512/42/25/33/avatars/222-33.jpg" id="img_gagnant" /><br> |
Ici, c'est le lien de l'avatar (celui que l'on voit sur le profil ou dans les messages par exemple), avec le nom "img_gagnant" que l'on va modifier dans le css, notamment pour lui attribuer une place ainsi qu'une taille (afin que ça ne soit pas trop grand Le "br" signifie que l'on passe une ligne
| Code: | <p id="gagnant_concours"><a href="http://school-of-pub.top-forum.net/profile.forum?mode=viewprofile&u=222" target="_blank">xjujuxleo</a></p><p id="nom_concours">Gagnant du Concours Express<br />"Rapidité, agilité, adresse"</p> |
Je ne crois pas que ce soit compliqué les choses à retenir sont que chaque élément à un nom (id) qui te permettre de modifier rapidement la couleur, la taille de la police, etc. rapidement grâce au CSS.
En conclusion, voici le code html pour ajouter à un gagnant (attention à bien modifier les champs )
| Code: | <a href="lien_du_concours" class="infobulle"><img src="lien_avatar_reduit" /><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><img src="lien_avatar_profil" id="img_gagnant" /><br><p id="gagnant_concours"><a href="lien_vers_profil" target="_blank">Pseudo</a></p><p id="nom_concours">Gagnant du concours<br />"nom"</p></td></tr></tbody></table></span></a> |
Et voilà le code css
| Code: | /********* Infobulle *********/
a.infobulle {
position: relative;
text-decoration:none;
color:#CC5252;
}
a.infobulle span {
display: none; /*Masque l'infobulle*/
}
a.infobulle:hover {
background: none; /*Pour le "bug" d'internet explorer*/
z-index: 999;
}
a.infobulle:hover span {
display: inline; /*Pour afficher l'infobulle au passage de la souris*/
position: absolute;
width:auto;
text-align:center;
white-space: nowrap; /*Pour éviter les retours à la ligne non désirés*/
bottom: 25px; /*Position de l'infobulle*/
right: 8px;
/*background-color:#FF99CC;/*Couleur de fond*/
background-image:url("http://school-of-pub.fr/images/fond_infobulle.png");
color: black; /*Couleur du texte*/
padding: 3px;
/*Bordures de l'infobulle*/
border: 1px double #000000;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
}
/********* Les gagnants des concours *********/
#img_gagnant{
text-align:center;
border:0;
height:150px;"
}
#gagnant_concours a{
font-size:14px;
font-variant:small-caps;
color: #5c0731;
font-weight:bold;
margin-top: -4px;
margin-bottom:-4px;
}
#nom_concours{
font-size:12px;
font-style:italic;
padding-left: 4px;
padding-right: 4px;
margin-top:-12px;
}
|
Voilà Logiquement, les commentaires dans le code devraient t'aider
Si tu as des questions, n'hésite pas ^^ |
|
