Comment faire une infobulle

[gagamissjtd]

Coucou, bon je pense que cette question à surement déjà dut être posée mais je ne trouve pas donc j'aimerais s'il vous plait que vous éclairiez ma lanterne x)
Alors en faite j'aimerais pour ma parti Staff dans le PA pouvoir faire en sorte que lorsqu'on passe sur l'image sa en affiche une autre juste en dessous et que l'on puisse accéder on lien est écrit enfin la c'est pas clair donc je vous montre

Alors la ce serait l'image sans que l'on ne passe dessus

Puis lorsque l'on passe dessus



Voila j'espère que vous pourrez m'aider ^^

[Invité]

Bonjour,

Il s'agit d'un système d'infobulle, et oui la question est très souvent posée .

Le code à insérer dans votre page d'accueil est:

Code:

<div class="infobulle"><img src="lien image ou apparait l'infobulle"><br /><span>Contenu de la bulle</span></div>

Il s'accompagne d'une partie CSS pour le design:

Code:


.infobulle{
position: relative;
z-index: 0;}

.infobulle:hover{
background-color: transparent;
z-index: 50;}

.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infobulle span img{
border: 2px;
padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}

En ce qui concerne le lien, il est dans le "contenu de la bulle" sous cette forme:

Code:

<a href="adresse du lien">nom du lien</a>

Cordialement.

[gagamissjtd]

Merci beaucoup

[gagamissjtd]

Mais en fait il me le met tout a gauche et j'aimerais le mettre en dessous assez prêt comment faire svp

[Invité]

Si vous voulez que cela se positionne bien, mettez les infobulles dans un tableau.
Par exemple si vous avez 2 personnes dans votre Staff et que chaque petite image fait apparaitre une bulle avec du texte, une image puis un lien le code donne ceci:

Code:

<table><tr><td><div class="infobulle"><img src="lien image ou apparait l'infobulle"/><br /><span>Texte<br /><img src="lien de la grande image"/><br /><a href="adresse du lien">nom du lien</a></span></div></td><td><div class="infobulle"><img src="lien image ou apparait l'infobulle"/><br /><span>Texte<br /><img src="lien de la grande image"/><br /><a href="adresse du lien">nom du lien</a></span></div></td></tr></table>

Cordialement.

[Threax]

Bonjour, Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre : - doit-être explicite (qui explique brièvement le problème), - ne doit pas être en majuscules, - ne doit pas contenir de mots trop généralistes : "aide" ; "help" ; "besoin d'aide" ; "problème"... Merci de le modifier en cliquant sur le bouton de votre premier message. A bientôt sur ForumActif

[gagamissjtd]

Merci ça m'as beaucoup aidé

[Threax]

Merci de mettre un titre explicite à votre sujet... Explicite !

[gagamissjtd]

En fait j'ai encore un petit problème la taille de l'écriture est trop grosse savez vous comment faire pour la réduire ? svp

[Invité]

Pour modifier la taille du texte encadrez le avec ces balises:

Code:

<font size="1">Texte</font>

1 est vraiment tout petit, vous pouvez essayé avec 2 ou 3.

Cordialement.

[gagamissjtd]

Merci c'est gentil de m'avoir aidé