Pixelia

Votre forum de graphisme et d'entraide ~
 
AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  
Pixelia devient Pixels Paradise ! Le forum ferme ici ses portes mais en ouvre de nouvelles à cette adresse : http://www.pixels-paradise.com/ Nous espérons que vous serez nombreux à nous suivre dans cette nouvelle aventure !

Partagez | 
 

 Info bulle

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Amber

New comer #
Masculin Messages : 6
Age : 23
Date d'inscription : 08/10/2011
Système d'exploitation : ubuntu, vista , rarement mac .

MessageSujet: Info bulle    Dim 9 Oct 2011 - 8:53

Faire une infobulle !


Avant tout !
Bon je sais que je ne suis pas codeur mais comme l'on est dans la partie des codes tout prêts...

Ce code concerne uniquement les pages web ( on ne peut le mettre dans un message , faites l'expérience vous-même ! ). Il sert par exemple à décorer un forum !

Euh.. mais c'est quoi une "infobulle" ?

C'est en faite un texte ( ou autre chose ) qui s'affichera lorsque l'on passera la souris sur une zone ( normalement du texte ). C'est pourquoi ici on parle donc ici de css.

Je ne suis "heureusement" pas le créateur du code .

Le code !
Le texte entre les balises : /* */ n’amènent rien au code, se sont des explications pour le codeur, qui dit par exemple à quoi sert cette ligne, ou cette ligne de code.

Code:
<a href="#" class="info">[ELEMENT]<span>[INFOBULLE]</span></a>

* {
  font-size: 11px; /* On définit les propriétés de texte pour toutes les balises. */
  font-family: Tahoma, Verdana, Arial, serif;
}
a.info {
  position: relative;
  color: black;
  text-decoration: none;

}
a.info span {
  display: none; /* On masque l'infobulle. */
}
a.info:hover {
  background: none; /* Correction d'un bug d'Internet Explorer. */
  z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

  cursor: help; /* On change le curseur par défaut par un curseur d'aide. On peut bien sur le changer pour un autres  curseur.*/
}
a.info:hover span {
  display: inline; /* On affiche l'infobulle. */
  position: absolute;

  white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

  top: 30px; /* On positionne notre infobulle. Se sont des valeurs prises au hasard, à vous de changer ses valeurs pour afficher où vous le souhaitez */
  left: 20px;

  background: white;

  color: dark;
  padding: 3px;

  border: 1px solid green;
  border-left: 4px solid green;
}

Utilisation!
Mais comment utiliser ce code ?

C'est sur vous n'êtes pas rendu si je vous donne ça comme cela ! Donc voici un exemple de son utilisation :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
* {
  font-size: 11px; /* On définit les propriétés de texte pour toutes les balises. */
  font-family: Tahoma, Verdana, Arial, serif;
}
a.info {
  position: relative;
  color: black;
  text-decoration: none;
  border-bottom: 1px gray dotted; /* On souligne le texte. */
}
a.info span {
  display: none; /* On masque l'infobulle. */
}
a.info:hover {
  background: none; /* Correction d'un bug d'Internet Explorer. */
  z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

  cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
  display: inline; /* On affiche l'infobulle. */
  position: absolute;

  white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

  top: 30px; /* On positionne notre infobulle. */
  left: 20px;

  background: white;

  color: green;
  padding: 3px;

  border: 1px solid green;
  border-left: 4px solid green;
}
</style>
</head>

<body>
<p>Je fais un exemple de code d'une <a href="#" class="info">< infobulle><span>un texte  qui s'affichera lorsque l'on passera la souris sur une zone, comme ceci !</span></a>
</body>

</html>

Pour vérifier le code rapidement, copier le, puis coller le dans un éditeur de texte ( bloc note, word ) et enregistrer le fichier en ".html". Ouvrez le fichier et normalement une page web avec uniquement la phrase "Je fais un exemple ... " s'affiche et vous pouvez admirer le travaille !

Revenir en haut Aller en bas
 

Info bulle

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

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Pixelia :: Codes tout prêts-
Sauter vers: