<form name="connexionForm" id="connexionForm" action="#"><!-- début du formulaire de connexion -->   
	<span id="erreur"></span><!-- span qui contiendra les éventuels messages d'erreur -->
 
	<label for="login">Nom d'utilisateur :</label>
        <input type="text" name="login" id="login" /><!-- champ pour le login -->
 
	<label for="pass">Mot de passe :</label>
	<input type="password" name="pass" id="pass" /><!-- champ pour le mot de passe -->
 
        <input type="submit" value="Je me connecte" class="bouton" /><!-- bouton de connexion -->
</form><!-- fin du formulaire -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

$(document).ready( function () { 
	$("#connexionForm").submit( function() {	// à la soumission du formulaire						 
		$.ajax({ // fonction permettant de faire de l'ajax
		   type: "POST", // methode de transmission des données au fichier php
		   url: "login.php", // url du fichier php
		   data: "login="+$("#login").val()+"&pass="+$("#pass").val(), // données à transmettre
		   success: function(msg){ // si l'appel a bien fonctionné
				if(msg==1) // si la connexion en php a fonctionnée
				{
					$("div#connexion").html("<span id=\"confirmMsg\">Vous &ecirc;tes maintenant connect&eacute;.</span>");
					// on désactive l'affichage du formulaire et on affiche un message de bienvenue à la place
				}
				else // si la connexion en php n'a pas fonctionnée
				{
					$("span#erreur").html("<img src=\"bomb.png\" style=\"float:left;\" />&nbsp;Erreur lors de la connexion, veuillez v&eacute;rifier votre login et votre mot de passe.");
					// on affiche un message d'erreur dans le span prévu à cet effet
				}
		   }
		});
		return false; // permet de rester sur la même page à la soumission du formulaire
	});
});

// connexion avec la base de données
$link = mysql_connect("localhost", "root", "") or die("Impossible de se connecter : " . mysql_error());
mysql_select_db("nomDeMaBase");
 
// on exécute maintenant la requete sql pour tester si les parametres de connexion sont ok
$result = mysql_query("SELECT login, pass, id FROM membres WHERE login = '$_POST[login]' AND pass = '$_POST[pass]'");
$membre = mysql_fetch_assoc($result);
 
if(($_POST[login]==$membre[login])&&($_POST[pass]==$membre[pass]))
{
	setcookie("id",$membre[id]); // genere un cookie contenant l'id du membre
	setcookie("login",$membre[login]); // genere un cookie contenant le login du membre		
	echo "1"; // on 'retourne' la valeur 1 au javascript si la connexion est bonne
}
else 
{
	echo "0"; // on 'retourne' la valeur 0 au javascript si la connexion n'est pas bonne
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.droppy.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="js/droppy.css" />

$(document).ready( function () {
    		$('#nav').droppy();
});

<ul id="nav">
		<li> <!-- premier élément du menu, n'a pas de sous-menu -->
			<a href="#">Menu 1</a>
		</li>
 
		<li> <!-- deuxième élément du menu, avec un sous-menu -->
			<a href="#">Menu 2</a> <!-- lien du menu -->
			<ul> <!-- début du sous-menu -->
				<li> <!-- premier élément du sous-menu -->
					<a href="#">Sous-menu 2.1</a>
				</li>
 
				<li> <!-- deuxième élément du sous-menu -->
					<a href="#">Sous-menu 2.2</a>
				</li>
 
				<li> <!-- troisième élément du sous-menu, avec un sous-sous-menu -->
					<a href="#">Sous-menu 2.3</a>
                                        <ul> <!-- début du sous-sous-menu -->
						<li><a href="#">Sous-sous-menu 2.3.1</a></li>
						<li><a href="#">Sous-sous-menu 2.3.2</a></li>
						<li><a href="#">Sous-sous-menu 2.3.3</a></li>
					</ul> <!-- fin du sous-sous-menu -->
				</li>
			</ul> <!-- fin du sous-menu -->
		</li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>	
<script type="text/javascript" src="http://static.flowplayer.org/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://static.flowplayer.org/js/jquery.scrollable-1.0.2.min.js"></script>

$(document).ready( function () {
		// initialisation du plugin de defilement
		$("div.scrollable").scrollable({
			size: 3,
			items: '#thumbs',  
			hoverClass: 'hover',
			next: 'div.next', 
			prev: 'div.prev' 
		});	
});

<!-- conteneur -->
<div class="scrollable">
 
	<div id="thumbs">
 
			<!-- chaque element est contenu dans un bloc de type div -->
			<div>
				<img src="photosExemples/mini/3.jpg" alt="image 1" />
 
				<h3><em>1. </em>An example title</h3>
 
 
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
					tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
				</p>				
			</div>
 
		        <!-- deuxieme element -->
			<div>
				<img src="photosExemples/mini/4.jpg" alt="image 2" />
 
				<h3><em>2. </em>An example title</h3>
 
				<p>
 
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
					tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
				</p>
			</div>
                        [...]
           </div>
</div>

/* element parent */
div.scrollable {  
	position:relative;
	overflow:hidden;
	width: 646px;	 
	height:300px;
	float:left;
}
 
/* 
	element parent pour les element a defiler, il faut absolument un grande largeur
*/
#thumbs {	
	position:absolute;
	width:20000em;	
	clear:both;
	border:1px solid #222;
}
 
/* un element seul */
#thumbs div {
	float:left;
	width:214px;
	height:300px;
	background:#333 url(photosExemples/fond.png) repeat-x 0;
	color:#fff;
	border-left:1px solid #333;
	cursor:pointer;
}
 
/* style au survol */
#thumbs div.hover {
	background-color:#444;	
}
 
/* style au survol */
#thumbs div.hover h3 {
	background:#797979 url(photosExemples/fond-h3-hover.png) no-repeat;
}
 
/* style quand un element est cliqué */
#thumbs div.active {
	background-color:#066;
	cursor:default;
}
 
/* styles à personnaliser selon votre contenu */
#thumbs h3, #thumbs p, #thumbs span {
	margin:13px;		
	font-family:"bitstream vera sans";
	font-size:13px;
	color:#fff;
}
 
#thumbs h3 {
	background:#353535 url(photosExemples/fond-h3.png) no-repeat;
	width:100%;
	padding:8px;
	padding-left:35px;
	margin-left:0px;
	margin-top:0px;
}
 
#thumbs h3 em {
	font-style:normal;
	color:#ffa800;
}
 
div.prev {
	color:#ffa800;
	font-size:1.6em;
	font-weight:bold;
	cursor:pointer;
	margin-top:150px;
	float:left;
}
div.next {
	color:#ffa800;
	font-size:1.6em;
	font-weight:bold;
	cursor:pointer;
	margin-top:150px;
	float:left;
}