|
20-07-2008 |
Un puzzle en javascript Ajax
L'aspect du puzzle
Le puzzle par lui-même :
Voir le puzzle Javascript Ajax
Dans votre header inclure :
<link rel="stylesheet" href="scriptaculous.css" type="text/css"
media="screen" />
<link rel="stylesheet" href="application.css" type="text/css"
media="screen" />
<script src="global.js" type="text/javascript"></script>
<script src="prototype.js" type="text/javascript"></script>
<script src="http://wiki.script.aculo.us/javascripts/scriptaculous.js"
type="text/javascript"></script> |
Télécharger les fichiers :
application.css : 
scriptacoulous.css :
global.js :
prototype.js :
Dans votre corps html inclure :
<div id="puzzle">
<img id="image_5" src="http://script.aculo.us/images/puzzle5.jpg" alt="" />
<img id="image_1" src="http://script.aculo.us/images/puzzle1.jpg" alt="" />
<img id="image_9" src="http://script.aculo.us/images/puzzle9.jpg" alt="" />
<img id="image_7" src="http://script.aculo.us/images/puzzle7.jpg" alt="" />
<img id="image_4" src="http://script.aculo.us/images/puzzle4.jpg" alt="" />
<img id="image_8" src="http://script.aculo.us/images/puzzle8.jpg" alt="" />
<img id="image_3" src="http://script.aculo.us/images/puzzle3.jpg" alt="" />
<img id="image_6" src="http://script.aculo.us/images/puzzle6.jpg" alt="" />
<img id="image_2" src="http://script.aculo.us/images/puzzle2.jpg" alt="" />
</div>
<p>
<span id="puzzleinfo">(no move made yet)</span>
</p>
<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("puzzle",
{tag:'img',overlap:'horizontal',constraint: false,
onUpdate:function(){
p = $("puzzle");
p.moves = p.moves || 0;
p.moves++;
$('puzzleinfo').innerHTML =
"vous avez fait " + p.moves + " mouvement" +
(p.moves>1 ? "s" : "");
if(Sortable.serialize("puzzle")==
"puzzle[]=1&puzzle[]=2&puzzle[]=3&" +
"puzzle[]=4&puzzle[]=5&puzzle[]=6&" +
"puzzle[]=7&puzzle[]=8&puzzle[]=9") {
$('puzzleinfo').innerHTML =
"Vous avez resolu le puzzle en <i>" + p.moves + "</i> mouvements!";
Element.Class.add('puzzleinfo','congrats');
}
}
})
// ]]>
</script>
|
 Citez cet article
|
- Les messages comportant des attaques verbales contre les personnes seront supprimés.
- Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur.
- Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
|
Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved |
Commenter cet article
