SOS-FORUM

Derniers sujets

» Silence Inside Me - Ouverture
par Solitude 3/3/2018, 12:36

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

1 Infobulles avec liens ! le 21/3/2010, 23:36

Voir le profil de l'utilisateur http://demon-pub.forumactif.org/forum.htm
Ce tutoriel a été publié par Basil Hawkins sur SOS-Forum.
Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Bonsoir ! Smile

Vous me direz : mais y a déjà un tutoriel sur les infobulles !! Certes, mais il n'est pas correct, des navigateurs ne marchent pas avec et surtout, on ne peut pas afficher des liens.

Partie à copier/coller dans Affichage ► Images et Couleurs ► Couleurs ► Onglet 'Feuille de style CSS', ne pas oublier de valider : Wink
Code:
div.infobulle {
  position: relative;
  float: left;
}

div.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
div.infobulle:hover span {
display: inline;
position: absolute;
top: Ypx;
left: Xpx;
background-color: #FFFFFF;
color: #000000;
padding: 2px;
border: 1px solid #000000;
}

Y correspond à combien de pixels l'infobulle va être décalé vers la droite par rapport à l'image.
X correspond à combien de pixels l'infobulle va être décalé vers la bas par rapport à l'image.
"color" correspond à la couleur du texte dans l'infobulle.
"background-color" correspond à la couleur de fond de l'infobulle.
"border" correspond à la bordure (là c'est une bordure pleine de 1px de couleur noire).
"padding" correspond à la marge intérieure (en clair, de combien de pixels votre texte va être écarté de la bordure).


Partie HTML :
Code:
<div class="infobulle"><img src="http://www.sos-forum.com/users/1613/87/30/54/smiles/73540.gif" />

<span>Padadapadipadi ...<br /><br /><div><a href="http://www.sos-forum.com/">Un Lien !</a></div><br /><div><img src="http://www.sos-forum.com/users/1613/87/30/54/smiles/115232.gif" /></div></span></div>

Comme vous l'aurez remarqué dans mon code HTML, il faut entourer les liens et les images à l'intérieur de la balise "span" d'une balise "div". Concernant l'apparence de l'infobulle, ça se fait dans le CSS Wink

Donc pour afficher une image ou un lien dans l'infobulle il faut faire ceci :
Code:
<div><a href="http://mon_domaine.com/">Allez sur Mon Domaine !</a></div>

<div><img src="http://www.sos-forum.com/users/1613/87/30/54/smiles/260113.gif" /></div>

Voilà tout, en espérant que le tutoriel vous servira Wink



Dernière édition par Basil Hawkins le 22/3/2010, 00:36, édité 1 fois

2 Re: Infobulles avec liens ! le 21/3/2010, 23:46

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Je t'avoue que je suis bien content que tu nous apporte une version stable !
J'ajoute à la liste !


Peut être faudrait il juste donner une explication sur la manière de placer le contenu pour les néophytes.

Merci en tout cas !
Smile

3 Re: Infobulles avec liens ! le 22/3/2010, 00:37

Voir le profil de l'utilisateur http://demon-pub.forumactif.org/forum.htm
Hello, Smile
Voilà c'est arrangé, en espérant que ça suffise Wink (non parce que l'explication des choses et moi ça fait deux =p)


Contenu sponsorisé

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

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

 
  •  

Créer un forum | © PunBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit