Image qui fait apparaitre un texte?

[kiitsune]

Bonsoir (ou bonjour);

Voilà, j'aimerai mettre sur la page d'accueil de mon forum, des images miniatures des avatars des membres du staff et quand la souris passe sur ces images qu'il y ait une petite case qui apparaisse à côté avec l'image en grand et une petite description.

Bon comme je suis souvent la seule à me comprendre je suis allée chercher un exemple:
http://isei-gakuen.forumgratuit.org/ (message de la age d'accueil> staff & friends 8D")

J'ai essayée pleins de choses mais je ne suis pas très douée, j'ai beaucoup chercher mais je trouve pas ce que je veux... Alors voilà j'ai fini par demander, j’espère que vous comprendrez ce que je veux et que vous pourrez m'aider (et que je n'ai pas posté au mauvais endroitt ou un truc comme sa )

Merci d'avance

[Automne]

Bonjour,


Se que vous demandez s'appelle une infobulle. Vous trouverez plein de demande a se sujet sur le forum. En voici une https://forum.forumactif.com/t314945-creer-une-infobulle-sur-une-image-de-titre

[kiitsune]

Oui voilà c'est sa, mais en fait j'avais déjà vue ce sujet mais j'ai rien compris >< c'est pour sa que je demande directement...

[Automne]

Bonjour,

Le code HTML est a mettre en message page accueil (pa << affichage page accueil, message page accueil). Dans se code, remplacer adresse de l'image, par l'url de votre image, texte a afficher, par votre texte.....

Le code css est a placer dans pa, affichage, image et couleurs, couleurs, feuille de style css ,

[kiitsune]

Merci sa marche
Mais par contre l'infobulle apparait en haut à gauche de ma page et pas à côté de l'image...

[Automne]

Re,

Non, j'ai testé, chez moi et c'est en bas a droite. Vérifier les code css, puis si sa fonctionne pas, donner le ccs, j'essayerais de voir.

[kiitsune]

Tener:

Code:

a.info {
        position:relative;
        z-index:24;
        color:#000000;
        text-decoration:none
        }
       
        a.info:hover {
        z-index:25;
        background-color:#FFFFFF
        }
       
        a.info span {
        display: none
        }
       
        a.info:hover span {
        display:block;
        position:absolute;
        top:2em;
        left:2em;
        width:15em;
        border:1px solid #000000;
        background-color:#FFFFFF;
        color:#000000;
        font-weight:none;
        padding:5px;
        }

(je ne l'ai pas modifié, car comme je vous l'ai dit, je ne suis pas douée en codage...)

[Automne]

Ok, alors donnez moi le code HTML et le lien du forum ou vous avez installé l'infobulle (laisser installé le code d'ailleurs).

[kiitsune]

En fait j'ai trouvée;

Code:

 position:[strike]absolute[/strike] relative;

Merci beaucoup!!!!

[Automne]

Parfait .

Bonne soirée.