Comment faire une infobulle

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Comment faire une infobulle

Message par gagamissjtd le Sam 4 Déc 2010 - 16:43

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 ^^


Dernière édition par gagamissjtd le Sam 4 Déc 2010 - 17:55, édité 5 fois

gagamissjtd
**

Féminin
Messages : 59
Inscrit(e) le : 06/01/2010

http://new-york-university.forum-actif.net
gagamissjtd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire une infobulle

Message par Invité le Sam 4 Déc 2010 - 17:04

Bonjour,

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

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire une infobulle

Message par gagamissjtd le Sam 4 Déc 2010 - 17:10

Merci beaucoup Very Happy

gagamissjtd
**

Féminin
Messages : 59
Inscrit(e) le : 06/01/2010

http://new-york-university.forum-actif.net
gagamissjtd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire une infobulle

Message par gagamissjtd le Sam 4 Déc 2010 - 17:14

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

gagamissjtd
**

Féminin
Messages : 59
Inscrit(e) le : 06/01/2010

http://new-york-university.forum-actif.net
gagamissjtd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire une infobulle

Message par Invité le Sam 4 Déc 2010 - 17:23

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire une infobulle

Message par Threax le Sam 4 Déc 2010 - 17:24

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 :editer: de votre premier message. Wink

A bientôt sur ForumActif Smile

Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire une infobulle

Message par gagamissjtd le Sam 4 Déc 2010 - 17:41

Merci ça m'as beaucoup aidé Flowers2

gagamissjtd
**

Féminin
Messages : 59
Inscrit(e) le : 06/01/2010

http://new-york-university.forum-actif.net
gagamissjtd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire une infobulle

Message par Threax le Sam 4 Déc 2010 - 17:44

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

Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire une infobulle

Message par gagamissjtd le Sam 4 Déc 2010 - 17:56

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

gagamissjtd
**

Féminin
Messages : 59
Inscrit(e) le : 06/01/2010

http://new-york-university.forum-actif.net
gagamissjtd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire une infobulle

Message par Invité le Sam 4 Déc 2010 - 18:20

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire une infobulle

Message par gagamissjtd le Sam 4 Déc 2010 - 18:22

Merci c'est gentil de m'avoir aidé

gagamissjtd
**

Féminin
Messages : 59
Inscrit(e) le : 06/01/2010

http://new-york-university.forum-actif.net
gagamissjtd a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum