CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 10:41:17

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

INFO BULLE

Information sur la source

Note :
Aucune note

Catégorie :Divers Classé sous :info-bulle, speechbubble, bulle, info bulle Niveau :Débutant Date de création :07/06/2011 Date de mise à jour :09/06/2011 19:53:32 Vu / téléchargé :3 207 / 353

Auteur : RudiRatlos

Ecrire un message privé

Commentaire sur cette source (6)

Ajouter un commentaire et/ou une note

Description

une info-bulle avec mootools(1.2 ou 1.3)
testé acec Firefox et IE7
pour des raisons de simplicité j'ai mis le code de la bulle, les css et les exemples sur une même page(index.html)
ce petit bout de code est si simple que je renonce à mettre plus d'expliquations.
sorry, les comments sont in english ;-)
si vous avez des questions, demandez....

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test:speechbubble</title>
<style type="text/css">
<!--
body { padding:100px; }
#contrightbottom {
display:block;
position:fixed; /* notice:IE6 dose not understand position:fixed lol */
right:0;
bottom:0;
background:#CCCCCC;
}
/* for the bubble */
.sbubble{
display:block;
position:absolute;
visibility:hidden;
border:1px solid black;
padding:10px;
font-family:Verdana, Arial;
font-size:10px;
color:#000000;
background:#FFFFCC;
z-index:10000;
}
/* sorry rounded corners do not work in IE, ..design a nice bg-img if you need this in IE */
.border1 {
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
-moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
-->
</style>
<script type="text/javascript" src="mootools-core-1.3.js"></script>
<script type="text/javascript" language="javascript">
<!--
// speechbubble by RudiRatlos (utilisez ce bout de code comme il vous plait)
window.addEvent('domready', function(){
var showb=false;
var bubbpos=1;
$(document.body).addEvent('mousemove',function(event){
if (showb) {
var mouseX = event.page.x;
var mouseY = event.page.y;
// positions of the bubble (the constants are distances from mousepointer, try sth. different)
if (bubbpos==1) {
var goleft=20;
var gotop=20;
} else if (bubbpos==2) {
var goleft=20;
var gotop=-($('bubbId').getStyle('height').toInt()+40);
} else if (bubbpos==3) {
var goleft=-($('bubbId').getStyle('width').toInt()+40);
var gotop=20;
} else if (bubbpos==4) {
var goleft=-($('bubbId').getStyle('width').toInt()+40);
var gotop=-($('bubbId').getStyle('height').toInt()+40);
}
$('bubbId').setStyles({visibility:'visible', top:mouseY+gotop, left:mouseX+goleft});
} else {
$('bubbId').setStyle('visibility','hidden');
}
});
var xx = new Array; // only needed if you want to disable the speechbubble later
// bpos 1:under mouse-pointer right 2:over mouse-pointer right 3:under mouse-pointer left 4:over mouse-pointer left
function setbtxt(el,cont,bpos) {
if ($(el)) {
$(el).addEvent('mouseenter', xx[el]=function(e){ // ( xx[el]= only needed if you want to disable the speechbubble later
e.stop();
if (bpos!=undefined) bubbpos=bpos; else bubbpos=1;
showb=true;
$('bubbId').innerHTML=cont;
});
$(el).addEvent('mouseleave', function(e){e.stop();showb=false;});
}
}
// remove events, only needed if you want to disable the speechbubble later
function xxbubb(el) {
if ($(el)) {
$(el).removeEvent('mouseenter', xx[el]);
$(el).removeEvent('mouseleave', xx[el]);
}
}
// ########## EXAMPLES ##########
// examples of activation of speechbubbles immediately after the dom is ready
setbtxt('myel1','blabla...<br /><b style="font-size:24px;">GREAT</b><br /><i style="color:red;">...yep lol!</i>',1); // ( element 1 )
setbtxt('myel2','holladi...<br /><b style="font-size:36px;">Yes-yes</b><br />...and yeah!',1); // ( element 2 )
setbtxt('myel4','<img src="images/caution.png" alt="caution" border="0" /><b style="font-size:50px;color:blue;">indeed this is a simple div...</b><br /><small>...lol</small>',2); // ( element 4 )
setbtxt('notice1','<h3>Help for Birthday</h3><br />must be isodate-format <strong>yyyy-dd-mm</strong> ( example 1972-31-12 )',3); // ( element 5 )
setbtxt('notice2','<h3>Help for Password</h3><br />min 6 characters<br />max 32 characters<br />must only contain characters from <strong>A</strong> to <strong>Z</strong> , <strong>a</strong> to <strong>z</strong> , <strong>0</strong> to <strong>9</strong>',4); // ( element 6 )
// example of the activation of the speechbubble for element with the id 'myel3' after you click a button... ( element 3 )
var bubbactive=false;
$('butt_bubbleme_myel3').addEvent('click', function(e){
e.stop();
if (!bubbactive) {
setbtxt('myel3','<i>lets take an external img</i><br /><img src="http://img.clubic.com/03384002-photo-logo-google-chrome-navigateur-web-jpg.jpg" alt="yeah!" border="0" width="120" /> ');
bubbactive=true;
}
});
// ...and disabling it
$('butt_xx_myel3').addEvent('click', function(e){
e.stop();
if (bubbactive) {
xxbubb('myel3');
bubbactive=false;
}
});
// example of disabling the speechbubble for element with the id 'myel1' after you click a button ( element 1 )
$('butt_xx_myel1').addEvent('click', function(e){
e.stop();
xxbubb('myel1');
});
});
//-->
</script>
</head>
<body>
<div id="bubbId" class="sbubble border1"></div>
<img id="myel1" src="images/fqu1.gif" alt="" border="0" /> <input id="butt_xx_myel1" type="button" value="remove this bubble !" />
<br /><br />
<img id="myel2" src="images/fqu1.gif" alt="" border="0" />
<br /><br />
<img id="myel3" src="images/fqu1.gif" alt="" border="0" /> <input id="butt_bubbleme_myel3" type="button" value="give me a bubble !" /> <input id="butt_xx_myel3" type="button" value="remove this bubble !" />
<br /><br />
<div id="myel4" style="background:#DFF4F4; border:1px solid black; width:300px; height:60px; text-align:center;">I am a simple div, mouse-over me and you will see a speech-bubble over the mouse-pointer to the right !</div>
<br /><br /><br /><br />
page ends here.
<div id="contrightbottom">
<a href="javascript:;" style="right:0;"><img id="notice1" src="images/notice.png" alt="" border="0" /></a>
<br /><br /><br /><br /><br /><br /><br /><br />
<a href="javascript:;" style="right:0; bottom:0;"><img id="notice2" src="images/notice.png" alt="" border="0" /></a>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test:speechbubble</title>
<style type="text/css">
<!--
body { padding:100px; }
#contrightbottom {
	display:block; 
	position:fixed; /* notice:IE6 dose not understand position:fixed lol */
	right:0;
	bottom:0;
	background:#CCCCCC; 
}

/* for the bubble */
.sbubble{
	display:block;
	position:absolute;	
	visibility:hidden;
	border:1px solid black;
	padding:10px;
	font-family:Verdana, Arial;
	font-size:10px;
	color:#000000;
	background:#FFFFCC;
	z-index:10000;
}
/* sorry rounded corners do not work in IE, ..design a nice bg-img if you need this in IE */
.border1 {
	-webkit-border-radius: 36px 12px;
	-moz-border-radius: 36px / 12px;
	-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
	-moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
-->
</style>
<script type="text/javascript" src="mootools-core-1.3.js"></script>
<!--<script type="text/javascript" src="mootools-1.2-core.js"></script>-->

<script type="text/javascript" language="javascript">
<!--
// speechbubble by RudiRatlos (utilisez ce bout de code comme il vous plait)

window.addEvent('domready', function(){

	var showb=false;
	var bubbpos=1;
	$(document.body).addEvent('mousemove',function(event){
		if (showb) {
			var mouseX = event.page.x;
			var mouseY = event.page.y;
			
			// positions of the bubble (the constants are distances from mousepointer, try sth. different)
			if (bubbpos==1) {
				var goleft=20;
				var gotop=20;
			} else if (bubbpos==2) {
				var goleft=20;
				var gotop=-($('bubbId').getStyle('height').toInt()+40);
			} else if (bubbpos==3) {
				var goleft=-($('bubbId').getStyle('width').toInt()+40);
				var gotop=20;
			} else if (bubbpos==4) {
				var goleft=-($('bubbId').getStyle('width').toInt()+40);
				var gotop=-($('bubbId').getStyle('height').toInt()+40);
			}
			
			$('bubbId').setStyles({visibility:'visible', top:mouseY+gotop, left:mouseX+goleft});
		} else {
			$('bubbId').setStyle('visibility','hidden');
		}
	});

 	var xx = new Array; // only needed if you want to disable the speechbubble later
	// bpos  1:under mouse-pointer right  2:over mouse-pointer right  3:under mouse-pointer left  4:over mouse-pointer left 
	function setbtxt(el,cont,bpos) {
		if ($(el)) {
			$(el).addEvent('mouseenter', xx[el]=function(e){ // ( xx[el]= only needed if you want to disable the speechbubble later
				e.stop();
				if (bpos!=undefined) bubbpos=bpos; else bubbpos=1;	
				showb=true;
				$('bubbId').innerHTML=cont;
			});
			$(el).addEvent('mouseleave', function(e){e.stop();showb=false;});
		}
	}
	
 	// remove events, only needed if you want to disable the speechbubble later
	function xxbubb(el) {
		if ($(el)) {
			$(el).removeEvent('mouseenter', xx[el]);
			$(el).removeEvent('mouseleave', xx[el]);
		}
	}
	

	// ########## EXAMPLES ##########

	// examples of activation of speechbubbles immediately after the dom is ready
	setbtxt('myel1','blabla...<br /><b style="font-size:24px;">GREAT</b><br /><i style="color:red;">...yep lol!</i>',1); // ( element 1 )
	setbtxt('myel2','holladi...<br /><b style="font-size:36px;">Yes-yes</b><br />...and yeah!',1); // ( element 2 )
	setbtxt('myel4','<img src="images/caution.png" alt="caution" border="0" /><b style="font-size:50px;color:blue;">indeed this is a simple div...</b><br /><small>...lol</small>',2); // ( element 4 )
	setbtxt('notice1','<h3>Help for Birthday</h3><br />must be isodate-format <strong>yyyy-dd-mm</strong> ( example 1972-31-12 )',3); // ( element 5 )
	setbtxt('notice2','<h3>Help for Password</h3><br />min 6 characters<br />max 32 characters<br />must only contain characters from <strong>A</strong> to <strong>Z</strong> , <strong>a</strong> to <strong>z</strong> , <strong>0</strong> to <strong>9</strong>',4); // ( element 6 )
	

	// example of the activation of the speechbubble for element with the id 'myel3' after you click a button... ( element 3 )
	var bubbactive=false;
	$('butt_bubbleme_myel3').addEvent('click', function(e){
		e.stop();
		if (!bubbactive) {
			setbtxt('myel3','<i>lets take an external img</i><br /><img src="http://img.clubic.com/03384002-photo-logo-google-chrome-navigateur-web-jpg.jpg" alt="yeah!" border="0" width="120" /> ');
			bubbactive=true;
		}
	});
	// ...and disabling it
	$('butt_xx_myel3').addEvent('click', function(e){
		e.stop();
		if (bubbactive) {
			xxbubb('myel3');
			bubbactive=false;
		}
	});
	
	
	// example of disabling the speechbubble for element with the id 'myel1' after you click a button ( element 1 )
	$('butt_xx_myel1').addEvent('click', function(e){
		e.stop();
		xxbubb('myel1');
	});
	
});
//-->
</script>

</head>
<body>
<div id="bubbId" class="sbubble border1"></div><!-- the div for the speechbubble -->


<!-- the examples -->

<!-- element 1 -->
<img id="myel1" src="images/fqu1.gif" alt="" border="0" /> <input id="butt_xx_myel1" type="button" value="remove this bubble !" />
<br /><br />

<!-- element 2 -->
<img id="myel2" src="images/fqu1.gif" alt="" border="0" />
<br /><br />

<!-- element 3 -->
<img id="myel3" src="images/fqu1.gif" alt="" border="0" /> <input id="butt_bubbleme_myel3" type="button" value="give me a bubble !" /> <input id="butt_xx_myel3" type="button" value="remove this bubble !" />
<br /><br />

<!-- element 4 -->
<div id="myel4" style="background:#DFF4F4; border:1px solid black; width:300px; height:60px; text-align:center;">I am a simple div, mouse-over me and you will see a speech-bubble over the mouse-pointer to the right !</div>
<br /><br /><br /><br />
page ends here.

<!-- here a few examples for elements near to the right or the bottom of the page -->
<div id="contrightbottom">

<!-- element 5 -->
<a href="javascript:;" style="right:0;"><img id="notice1" src="images/notice.png" alt="" border="0" /></a>
<br /><br /><br /><br /><br /><br /><br /><br />

<!-- element 6 -->
<a href="javascript:;" style="right:0; bottom:0;"><img id="notice2" src="images/notice.png" alt="" border="0" /></a>

</div>

</body>
</html>

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

speechbubble
- images
  - caution.png 1 168 octets
  - fqu1.gif 21 241 octets
  - notice.png 2 740 octets
  - Thumbs.db9 728 octets
- index.html 6 328 octets
- mootools-1.2-core.js 64 471 octets
- mootools-core-1.3.js 86 238 octets

Télécharger le zip

Historique

09 juin 2011 19:48:58 :: Commentaire de KAZMA: par contre le code ne gere pas le changement de position de la bulle quand l'élément se trouve rapproche de la droite ou du bas de la page j'ai ajouté cette fonctionalité!
09 juin 2011 19:53:32 :: Commentaire de KAZMA: par contre le code ne gere pas le changement de position de la bulle quand l'élément se trouve rapproche de la droite ou du bas de la page ---> j'ai ajouté cette fonctionalité!

Sources de la même categorie

SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth

INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges

TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia

COLONNES ADAPTABLES EN HAUTEUR par dronoide

VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

INFOS BULLE PARAMÉTRABLE (TOUS NAVIGATEURS) par mattho

GÉNÉRATEUR D'INFO-BULLES DYNAMIQUES par Lomendil

EXPLORATEUR DOM par biskbart

INFO BULLE COMPATIBLE SELECT ET DOCTYPE par PetoleTeam

INFO BULLE TOUJOURS VISIBLE par PetoleTeam

Commentaires et avis

Commentaire de MacGaliver le 08/06/2011 16:27:24

Bonjour,

Juste une sugérration: Mettez une capture.

Cordialement.

Commentaire de MacGaliver le 08/06/2011 16:29:06

"Suggestion" et non "Sugérration" excusez-moi !

Commentaire de kazma le 08/06/2011 20:41:13 administrateur CS

par contre le code ne gere pas le changement de position de la bulle quand l'élément se trouve rapproche de la droite ou du bas de la page

Commentaire de RudiRatlos le 09/06/2011 19:55:32

@KAZMA bonne remarque, je viens d'ajouter ça!

Commentaire de arta le 13/06/2011 07:38:54

Bonjour tous

Bah on verra quand les commentaires seront en français ;)
Aprés tout, logique, étant proposé sur un site français pour des français :))

Commentaire de begueradj le 15/06/2011 17:09:35

franchement, je ne sais pas à quoi ça va servir

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

bug info bulle [ par ntfree ] voila, c tt simple, g chopé le script info bulle de ce site.mais le probleme, c'est ke maintenant, il est impossible de selectionner du texte sur le s Infos Bulle [ par Florette ] Tout d'abord bonjour à vous tous,Mon soucis est lorsque je survol une image, une info bulle apparaît, mais trop lentement. Il faut rester un certain t PB avec INFO BULLE [ par renaud1102 ] Bonjour,J'ai un formulaire, et quand je passe le curseur de ma souris sur un des liens, l'info bulle apparait sous les cases du formulaire. Donc je ne problème affichage info bulle [ par _lolo ] Bonjour,Voilà j'ai récupéré un p'tit script pour faire de belles infos bulles :)Malheureusement les infos bulles qui apparaissent dans le menu droit d un menu genre bulle d'aide [ par daeron ] J'ai bien regarde les sources mais je n ai pas trouve d inspiration...L'idee est simple c est de realiser une bulle d aide avec differents menus un pe info bulle [ par fixou47 ] Bonjour à touscomment pouvoir mettre plusieurs lignes dans une info bulle ?du type : ordre du jour -approbations une info bulle qd je survole une checkbox [ par adilou1981 ] bonjour je voudrais savoir quel script permet d'afficher une info bulle qd le curseur passe dessus une case à cocher merci info bulle [ par adilou1981 ] bonjour je voudrais savoir quel script permet d'afficher une info bulle qd le curseur passe dessus une case à cocher merci Enorme Probleme avec document.body.scrollTop [ par polo_777 ] voila je souhaiterai faire une info bulle, pour ce faire j'ai trouver des tas des scripts deja tout fait qui fonctionnes tres bien sauf que "tous" on image dans une bulle d'aide [ par picko ] Hello, je voudrais faire apparaitre une image en cliquant sur une vignette sans utiliser de pop up mais plutôt comme un système de bulle d

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP