Au passage de la souris un texte apparait....

Question

Bonjour,
Alors voila, je voudrais qu'un descriptif apparaisse au dessus de mes diapo quand la souris le survole. Seulement je voudrai pouvoir personnaliser complétement ce texte en terme de police, taile, et fond..
Pour ceux qui naviguent avec IE un petit texte tout moche apparait, ceux qui utilisent FF ne verront rien...
Ci joint le lien vous menant a la page concernée. http://quentin.xaille.free.fr/galerie%20diapo.html
Merci d'avance!!!!!!!

Utilisateur anonyme · Answer

Tu as déjà remarqué que CCM utilise ce principe, peut-être qu'en fouillant un peu le code source du site tu pourrais t'en inspirer ? Sinon le projet boxover propose le même système.

quentin · Answer

J'avais bien remarqué seulement de là a "fouiller" le code source je ne suis pas assez bon en webmastering pour trouver ce qui m'interresse!! Je pensais créer un texte avec photoshop ou autre et le faire apparaitre grace a la souris un peu comme une image qui s'agrandie au passage de la souris.
J'espére etre clair!!

RAD ZONE · Answer

SALUT

voila une methode css pour faire une tooltip

style type="text/css">
  a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 20px;
    left: -10px;
    padding: 5px;
    color:#ff7c11;
    border: 2px solid #999;
    background: #000;
    width:170px;
}
</style>
</head>
  <body>
   <a href="url-du-lien" class="tooltip">texte du lien<em><span></span>texte de l'infobulle</em></a>
 </body>
</html>

RAD ZONE · Answer

OUI regarde un peu ce qu est le CSS !!

pour le code
 les couleurs , position , taille  enfin bref tout les reglages pour la tooltip  ce font en CSS dans ces lignes 
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 20px;
    left: -10px;
    padding: 5px;
    color:#ff7c11;
    border: 2px solid #999;
    background: #000;
    width:170px;
}


RAD

KantX · Answer

Ok les gars! Je vais bosser! Merci pour vos lumières!!

Au passage de la souris un texte apparait....

5 réponses

Discussions similaires

Newsletters