Bandeau défilant (change d'image au survol)

Si vous souhaitez remplacer votre bannière statique par un bandeau moderne, qui coulisse au survol d'un onglet, alors ce tutorial est fait pour vous.

Mieux que de longues explications, voici un exemple concret sur Côté Jardin et Clôtures
En survolant une catégorie (Paysage, Terasses Bois, etc.) vous remarquerez que l'image coulisse.

---

1) Pour mettre en place ce plug-in, vous devez d'abord télécharger la librairie mootools.js
Placez la dans le dossier de votre site web.

Créez ensuite un fichier, ici appelé bandeaux.js et placez le code suivant
<!---- var scroll = new Fx.Scroll('conteneur-bandeaux', { wait: false, duration: 1000, offset: {'x': 0, 'y': 0}, transition: Fx.Transitions.Quad.easeInOut }); $('link1').addEvent('mouseover', function(event) { event = new Event(event).stop(); scroll.toElement('content1'); }); $('link2').addEvent('mouseover', function(event) { event = new Event(event).stop(); scroll.toElement('content2'); }); $('link3').addEvent('mouseover', function(event) { event = new Event(event).stop(); scroll.toElement('content3'); }); $('link4').addEvent('mouseover', function(event) { event = new Event(event).stop(); scroll.toElement('content4'); }); ---->

Ici on créé donc un défilement entre 4 DIV différentes : content1, content2, content3 et content4 que nous apellerons via la fonction link1, link2, link3 et link4.

duration: 1000, indique la vitesse à laquelle notre bandeau va coulisser, vous pourrez modifier cette valeur comme il vous plaira.

2) Ajoutez le code CSS permettant de définir la taille de votre bandeau et les différentes images de fond.
<!---- #conteneur-bandeaux { overflow:hidden; height:200px; width:900px; position:relative; clear: both; } #interieur-bandeaux { width:3600px; height:200px; position:relative; } .bandeau_clotures, .bandeau_paysage, .bandeau_bois, .bandeau_aires { width:900px; height:200px; position:absolute; } #content1 { left: 0; top: 0; background: url(images/bandeau1.jpg) no-repeat; background-color:black; } #content2 { left: 900px; top: 0px; background: url(images/bandeau2.jpg) no-repeat; background-color:blue; } #content3 { left: 1800px; top: 0px; background: url(images/bandeau3.png) no-repeat; background-color:red; } #content4 { left: 2700px; top: 0px; background: url(images/bandeau2.jpg) no-repeat; background-color:green; } ---->

3) Placez ensuite sur votre page à l'endroit souhaité les différents bandeaux <!---- <div id="conteneur-bandeaux"> <div id="interieur-bandeaux"> <div id="content1" class="bandeau_clotures"> </div> <div id="content2" class="bandeau_paysage"> </div> <div id="content3" class="bandeau_bois"> </div> <div id="content4" class="bandeau_aires"> </div> </div> </div> ---->

Ainsi que le menu
<!---- <a id="link1" href="#">Onglet 1</a> <a id="link2" href="#">Onglet 2</a> <a id="link3" href="#">Onglet 3</a> <a id="link4" href="#">Onglet 4</a> ---->

4) Sans oublier d'appeler la librairie mootools.js et bandeaux.js (appeler les librairies à la fin si le bandeau ne fonctionne pas)
<!---- <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="bandeaux.js"></script> ---->