Création d'une infobulle

Ke3lly · 09/07/2011, 13h04

Bonjour.

Alors voilà. Sur mon forum, je voudrais faire des infobulles. J'ai des images sur ma page d'accueil, des admin et fondatrice. Et je voudrais que quand on passe la souris dessus, une image de son avatar s'affiche en entier, et que des informations s'affichent. Et si possible j'aimerais bien que quand on survole le lien, il apparaisse en fondue. Comme ça → http://webbricks.org/bricks/bubulle/# Là ou il y a a marqué "• apparition en fondu - démo"

Alors si quelqu'un pourrais m’éclairer, il m'enlèverais un grosse épine du pied ...

Voici mon forum pour que vous voyez un peu le truc → http://pensionnat-monty-rpg.forumactif.fr/

BByani · 09/07/2011, 20h48

En Jquery tu trouvera ton bonheur je pense.
http://www.webinventif.fr/comment-fa...ge-via-jquery/

Ke3lly · 09/07/2011, 21h34

Hum ... J'ai pas tout captée ;/ Vous n'auriez pas plus clair ?

BByani · 10/07/2011, 12h01

Tu peux mettre le contenu de l'info bulle entre balise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span></span>

(donc image/texte/liens...) cacher cet info bulle avec du css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="display:none;"

et sur ton liens/texte tu place un event handlers donc ici onmousehover et tu lances une fonction qui va t'affiche le fameux span en question.

Exemple tous en un (j'ai utiliser du jquery):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
        <!-- La je recupere la biblio depuis le net -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
</head>
<body>
<style type="text/css">
/*je cache les bubulles */
span{
	color:orange;
	display:none;
	position:absolute;
	left:160px;
	float:left;
}
</style>
<ul>
	<li>Gargamel<span>Gargamel est un etrange personnage<br />assez mechant!!</span></li>
	<li>Pingus<span>Pingus est un canard<br />assez malaroit!!</span></li>
	<li>Volcanos<span>Volcanos est un volcan vivant<br />assez instable!!</span></li>
</ul>
 
<script type="text/javascript"> 
	//ici je lance ma fonction quand la page est chargé
	$(document).ready(function(){
		//la je déclenche une fonction si ma souris survole une des balises li
		$("li").mouseover(function(){
			$(this).find("span").css('display','inline');
		});
                //et bien sur l inverse si je quitte le li
		$("li").mouseout(function(){
			$(this).find("span").css('display','none');
		});
	});
</script>
</body>
</html>

Je te conseil de tester ce code pour déja comprendre sont fonctionnement aprés tu pourras utilisé plus facilement des script tous faits.

Ke3lly · 10/07/2011, 14h47

D'accord, c'est déjà plus claire, merci beaucoup, mais maintenant si j'ai bien compris, c'est pas du CSS mais html. Dans ce cas, ou faut-il que j'aille pour entrer les codes ? Désolée, je suis débutante ... ;/

09/07/2011, 13h04	#1
Ke3lly Invité de passage Inscription : juin 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : juin 2011 Messages : 5 Points : 0 Points : 0	Création d'une infobulle Bonjour. Alors voilà. Sur mon forum, je voudrais faire des infobulles. J'ai des images sur ma page d'accueil, des admin et fondatrice. Et je voudrais que quand on passe la souris dessus, une image de son avatar s'affiche en entier, et que des informations s'affichent. Et si possible j'aimerais bien que quand on survole le lien, il apparaisse en fondue. Comme ça → http://webbricks.org/bricks/bubulle/# Là ou il y a a marqué "• apparition en fondu - démo" Alors si quelqu'un pourrais m’éclairer, il m'enlèverais un grosse épine du pied ... Voici mon forum pour que vous voyez un peu le truc → http://pensionnat-monty-rpg.forumactif.fr/
	00

09/07/2011, 20h48	#2
BByani Nouveau Membre du Club Yann Vangampelaere Développeur Web Inscription : juillet 2011 Messages : 30 Détails du profil Informations personnelles : Nom : Yann Vangampelaere Localisation : Belgique Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : juillet 2011 Messages : 30 Points : 37 Points : 37	En Jquery tu trouvera ton bonheur je pense. http://www.webinventif.fr/comment-fa...ge-via-jquery/
	00

09/07/2011, 21h34	#3
Ke3lly Invité de passage Inscription : juin 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : juin 2011 Messages : 5 Points : 0 Points : 0	Hum ... J'ai pas tout captée ;/ Vous n'auriez pas plus clair ?
	00

10/07/2011, 14h47	#5
Ke3lly Invité de passage Inscription : juin 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : juin 2011 Messages : 5 Points : 0 Points : 0	D'accord, c'est déjà plus claire, merci beaucoup, mais maintenant si j'ai bien compris, c'est pas du CSS mais html. Dans ce cas, ou faut-il que j'aille pour entrer les codes ? Désolée, je suis débutante ... ;/
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email