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

[ ↓ ]

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

Milouze14


Fondateur

Milouze14

Message posté: le Jeu 1 Déc 2011 - 19:39
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






Fondateur des forums Milouze14

- Contact par MP -



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

[ ↑ ]

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

  
  • © PunBB | Signaler un abus