Info bulle

Télécharger le projet
Commenter

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 / Exemple : 


<!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>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.