Forum de Graphisme - Best of Graph'
Les inscriptions au forum sont maintenant fermée, en effet, nous ne trouvons pas juste de faire s'inscrire des membres pour rien, vu que le forum en dans un état actuellement passif.
Merci, bien à vous!
BOG.

Remarque : la partie publique du forum, tutoriels, ... restent actifs.

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 Une infobulles !!! le 17/1/2011, 08:14

Blur's

avatar
Membre
Coucou,

Alors là, je me lance dans le compliqué, je veux vous apprendre à faire une infobulle. Donc je vais y aller doucement car à un moment il faudra mélanger le CSS et le HTML, c'est un code assez compliqué tout de même.

Donc on va commencer par du HTML, le code de notre infobulle commencera toujours comme ça :
Code:
<a href="#" class="info_bulle">Survole-moi<div>Le contenu de mon infobulle</div></a>

Donc ici, nous avons un lien qui va déclencher l'infobulle (le lien peut se changer en div et on enlèvera alors le href="#" mais je ne sais pas si ça marche partout) lorsqu'on survol ce lien représenter par survole-moi la div apparaitra.

Seulement pour le moment on voit tout:

Pour remédier à cela, il faut mettre un peu de CSS:

On va d'abord cacher le contenu de l'infobulle (la div et ce qu'il y a à l'intérieur). Pour cela on va utilisé la propriété display: none; sur les div qui sont de class infobulle, ce qui nous donnera:

Code:
.info_bulle div{
   display:none;
}

Ce code est à mettre dans une feuille de style CSS ou entre deux balise style.

Ce petit bout de code nous permet de cacher le contenu de l'infobulle :

Maintenant, on va faire en sorte que, quand on passe la souris sur le survole-moi, on voit le contenu de l'infobulle. On va donc dire que lorsqu'on survole le survole-moi (.info_bulle:hover) on voit l'infobulle (display:inline;):

Code:
.info_bulle:hover div{
   display:inline;
}

Ce code est à ajouter au CSS précédent.

Ce qui nous donne quand on survole le lien:

on a une infobulle très simple, maintenant on va donner de la forme au tout. On va d'abord définir une taille et une couleur de fond, avec width pour la largeur, height pour la hauteur et background-color pour la couleur, on ajoute ceci au code CSS précédent mais cette fois on l'intègre à ce qui est déjà écrit:
Code:
.info_bulle:hover div{
  display:inline;
  width:400px;
  height:200px;
  background-color:#40A497;
}

Voila qui est fait

Maintenant, on va donné une place à notre infobulle par rapport au lien, on doit donc dire que la position de la div va se faire par rapport à notre lien:
notre positionnement n'est valable que pour les infobulles. On doit donc ajouté ceci au CSS:
Code:
.info_bulle{
  position:relative;
  }

On aura donc tout ça dans notre CSS:
Code:
.info_bulle{
  position:relative;
  }

.info_bulle div{
  display:none;
}

.info_bulle:hover div{
  display:inline;
  width:400px;
  height:200px;
  background-color:#b7abcb;
  position: absolute;
}

Maintenant, on va indiquer la place de notre infobulle en comptant le bord haut et le bord gauche (top et left):

Code:
.info_bulle:hover div{
  display:inline;
  width:400px;
  height:200px;
  background-color:#b7abcb;
 
  position: absolute;
  top: 12px;
  left: 8px;
}

ce qui nous donne:

Si on regarde l'image le texte de notre infobulle est un lien, pour changer ça il suffit de le mettre dans un tableau notre HTML au final donnera ça:
Code:
<a href="#" class="info_bulle">Survole-moi<div><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle</td></tr></table></div></a>

(après vous pouvez changer, c'est même plutôt recommander, le survole_moi et le contenu de l'infobulle)

et après on peut ajouter n'importe quel CSS sur le lien comme sur l'infobulle pour faire des choses jolies, des coins arrondis, une bordure, tout; Dans notre CSS nous aurons donc:

Code:
/*__CSS du lien*/
.info_bulle{
  position:relative;
  text-decoration:none;
  font-variant:small-caps;
  color:#b3755a;
  }
  /*__ bord de l'infobulle et CSS du lien*/
.info_bulle:hover{
  color:#b3755a;
  border-bottom: 1px dotted #b3755a;
  letter-spacing:1px;
  font-weight:bold;
  }
/*__ CSS du texte de l'infobulle*/ 
.info_bulle div{
  display:none;
  color:#2f2c2a;
  font-weight:normal;
  font-variant:normal;
  text-align:center;
}
/*__ taille et couleur de fond de l'infobulle */
.info_bulle:hover div{
  display:inline;
  width:400px;
  height:200px;
  background-color:#d3afa0;
  border:1px dashed #7d4c36; 
  /*___position de l'infobulle */
  position: absolute;
  top: 12px;
  left: 8px;
}

Et voila, on a une infobulle jolie et faite par sois même.

Pour voir le résultat du code au dessus c'est ici
http://forumgraph.forumactif.com/forum.htm

2 Re: Une infobulles !!! le 18/1/2011, 07:15

Arkantos22

avatar
Administrateur
Merci pour ce-tutoriel très utile.
J'espère qu'il servira aux membres de Best of Graph'.

Aux plaisirs de voir ton prochains tutoriel.

_____________


[center]

Fondateur & Administrateur de Best of Graph'
»Ma galerie sur BoG«

bestofgraph@gmail.com - Envoyer un message privé

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

 

Optimisé pour Mozilla Firefox et Google Chrome
Tous droits reservés - Copyright 2011-2013