Une belle infobulle avec lien cliquable

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

Une belle infobulle avec lien cliquable

Icône par defaut le Jeu 1 Déc 2011 - 19:39
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou ,

voilà une astuce pour avoir une infobulle au survol d'un texte ou d'une image
avec un lien cliquable hinhin .

Vous êtes prêt?

Allez c'est parti les ami(e)s hinhin .

Je vais expliquer dans un premier temps avec une image pour avoir ceci:


Les forums Milouze14










Décortiquons le code html:
Code:

<div class="infobulle">
<img src="LE LIEN DE L IMAGE QUI SERA SURVOLÉE" /><span>
<center>LE TITRE</center>
<div><a href="LE LIEN CLIQUABLE"style="color: #LA COULEUR ATTRIBUÉE;">LE TITRE DU LIEN </a></div>
<div><img src="LE LIEN DE L IMAGE EN BAS A GAUCHE" /></div></span></div>

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style



Code:
div.infobulle {
  position: relative;/* ne rien modifier*/
  float: left;/* l'image sera positionnée à gauche mettre right pour la droite*/
}

div.infobulle span {
  display: none; /* ne rien modifier*/
}
div.infobulle:hover {
  background: none; /* ne rien modifier*/
  z-index: 999; /* ne rien modifier*/
}
div.infobulle:hover span {
display: inline;/* ne rien modifier*/
position: absolute;/* ne rien modifier*/
top: 15px; /* l'infobulle sera à 15px du haut*/
left: 40px;  /* l'infobulle sera à 40 px du bord gauche*/
background-color: #couleur; /* la couleur de fond de l'infobulle*/
color: #couleur; /* la couleur de police de l'infobulle*/
padding: 2px; /* une marge de 2 px */
border: 2px solid #couleur; /* une bordure de 2 px et la couleur*/
-webkit-border-radius: 6px; /* bordure arrondies de 6px */
-moz-border-radius: 6px; /* bordure arrondies de 6px */
border-radius: 6px;  /* bordure arrondies de 6px */
min-width: ... px; /*Largeur minimale de l'infobulle en px */
}

Pour les fainéants faites un copier coller du code mentionné plus haut moqueur :
Servez vous les ami(e)s:

Code:
/*infobulle */
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: 15px;
left: 40px;
background-color: #141414;
color: #20aec8;
padding: 2px;
border: 2px solid #20aec8;
  -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
min-width:400px;
}
/*fin*/




Je vais maintenant avec un texte pour avoir ceci:

LE TEXTE QUI SERA SURVOLÉ
Les forums Milouze14




Pour la feuille de style c'est l'identique sauf pour le :
left: 40px; /* l'infobulle sera à 40 px du bord gauche*/

ou il faudra augmenter la valeur hinhin .

Code:
<div class="infobulle">LE TEXTE QUI SERA SURVOLÉ<span>
<center>LE TITRE</center>
<div><a href="LE LIEN CLIQUABLE"style="color: #LA COULEUR ATTRIBUÉE;">LE TITRE DU LIEN </a></div>
<div><img src="LE LIEN DE L IMAGE EN BAS A GAUCHE" /></div></span></div>


Vous pouvez toujours modifier votre feuille de style à votre gout ainsi que le code html hinhin

Si vous désirez mettre une image de fond pour votre infobulle,
il faudra déposer dans:
Code:
div.infobulle:hover span

ceci:
Code:
background: url('lien de l'image') no-repeat;    /* l 'image ne se répète pas*/

Attention à bien respecter la taille de l'infobulle
si vous avez mentionné 400px l'image ne devra être plus importante hinhin .


Voilà, c'est tout pour le moment moqueur





-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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