Un exemple :
Vous constatez que le rythme change au survol de la souris.
PREMIERE ETAPE :
Allez chez
AndrewSellick
Cliquez sur
Feel free to download the Simple 3D Carousel.
Vous venez d'enregistrer un fichier .zip. C'est un ensemble de fichiers compressés.
Pour décompresser ces fichiers, j'utilise Win RAR, Extraire vers
DEUXIEME ETAPE :
Dans votre administration - Documents - Mes fichiers :
- vous créez un répertoire Carroussel
- dans ce répertoire, vous enregistrez les fichiers :
- 3dcarroussel.js
- mootools.js
- vous notez leur adresse
TROISIEME ETAPE :
En mode source/HTML de l'endroit où vous voulez créer ce carroussel, vous collez
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/carroussel/mootools.js"
type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/carroussel/3dcarousel.js"
type="text/javascript"></script>
Si votre blog est sur Over-Blog, vous pouvez utiliser mes propres adresses de fichiers.
Vous collez ensuite
<style>
#carousel{background-color:#000000;
width:700px;
height:400px;
position:relative;
border:1px solid #FFFFFF;}
img{ width:100%;
height:auto;
border:0px solid #FFFFFF;
display:block;}
</style>
Vous pouvez personnaliser le background, les dimensions, les bordures.
Et pour finir, vous collez
<body>
<div id="carousel">
<div><a href="#"><img src="images/dreamweaver.png" /></a></div>
<div><a href="#"><img src="images/director.png" /></a></div>
<div><a href="#"><img src="images/flash.png" /></a></div>
<div><a href="#"><img src="images/freehand.png" /></a></div>
<div><a href="#"><img src="images/swf-player.png" /></a></div>
<div><a href="#"><img src="images/coldfusion.png" /></a></div>
</div>
</body>
Avec l'adresse de vos propres images(en rouge).
MàJ:Janvier 2009
Commentaires