Parfois, une seule image ne suffit pas pour présenter tout ce que vous souhaitez promouvoir sur votre site. Si vous vous êtes déjà demandé comment certains sites font pivoter plusieurs images et que vous souhaitez le faire vous-même, eh bien, ne vous demandez plus. Je suis là pour vous montrer comment c’est fait. De plus, comme avantage supplémentaire, je vais vous montrer comment vous pouvez mettre à jour vos images en un seul endroit et que ces mises à jour apparaissent globalement sur votre site.
Disons que vous avez un site de cuisine et que vous voulez que les photos des cinq repas les plus récents que vous avez présentés tournent dans la bannière. Ou, disons que vous avez un site immobilier et que vous souhaitez que les photos de vos 10 annonces les plus récentes tournent à un endroit spécifique sur toutes vos pages. Pour ajouter des fonctionnalités, vous souhaitez que chaque image soit liée à une page différente. Tout cela ne pose aucun problème avec le code suivant.
D’abord, vous devez vous organiser. Rassemblez toutes vos images dans le même dossier et assurez-vous qu’elles ont la même taille. S’ils ne sont pas de la même taille et que vous ne voulez pas les déformer, il suffit de redimensionner le canevas de chaque image et de ne pas redimensionner l’image elle-même. De cette façon, l’espace réservé où les images apparaissent ne changera pas de forme à chaque nouvelle image.
Deuxièmement, collectez tous les liens que vous souhaitez associer aux images et enregistrez-les dans un endroit pratique afin de pouvoir les copier et les coller plus tard.
Troisièmement, vous devez coller les éléments suivants dans l’en-tête de chaque page pour laquelle vous souhaitez que le rotateur d’image apparaisse:
<script language="JavaScript1.2″>var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6// place your images, text, etc in the array elements here
var items = new Array();
items="<a href='link.htm' ><img alt='image0 (9K)' src=' /Images/image0.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image1 (9K)' src='/Images/image1.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image2 (9K)' src='/Images/image2.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image3 (9K)' src='/Images/image3.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image4 (9K)' src='/Images/image4.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image5 (18K)' src='/Images/image5.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
function rotater() {
document.getElementById("placeholder").innerHTML = items;
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);
}function rotater() {
if(document.layers) {
document.placeholderlayer.document.write(items);
document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv").innerHTML=items
if(document.all)
placeholderdiv.innerHTML=items;current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//–>
</script>
À première vue, ce code peut sembler intimidant. Cependant, tout ce que vous avez à faire est de mettre à jour le chemin d’accès aux fichiers image et de remplir les URL des liens. Bien sûr, vous devez également mettre à jour les attributs de hauteur et de largeur pour les adapter à votre site.
Si vous souhaitez que quatre images tournent, supprimez simplement l’une des lignes d’éléments. Si vous souhaitez en ajouter un, copiez-collez et mettez à jour des éléments en éléments, etc.
Vous avez maintenant jeté les bases de l’ajout de ce rotateur d’images à votre site. Mais il y a encore une étape à faire pour que vos images apparaissent sur la page. Déterminez où vous souhaitez que les images apparaissent sur la page et copiez-les:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
C’est tout ce qu’il y a à faire. Lorsque j’ai commencé à travailler sur l’ajout d’un rotateur d’images sur mon site, ce n’était pas aussi facile que de copier-coller. J’ai parcouru plusieurs exemples de code différents que j’ai trouvés en ligne. La plupart d’entre eux ne fonctionnaient pas. Ce code ci-dessus n’a pas fonctionné non plus, mais j’ai ensuite fait quelques ajustements ici et là et j’ai réussi à le faire fonctionner. J’ai fait le plus dur pour toi. Maintenant, tout ce que vous avez à faire est de mettre à jour vos images et vos liens, de faire un peu de copier-coller, et c’est parti.
Si vous décidez d’utiliser ce rotateur d’images sur plusieurs pages différentes de votre site et que vous devez ensuite modifier les images et le contenu, vous pouvez le faire à partir d’un seul endroit. Cependant, cela nécessite une certaine planification à l’avance. Revenons à l’exemple d’un site immobilier. Lorsque vous enregistrez les images, je recommande d’utiliser la même convention pour chaque image, par exemple, « House1.jpg » et « Maison2.jpg » et ainsi de suite. Ensuite, lorsque vous souhaitez présenter une nouvelle série de maisons, nommez simplement les nouvelles images en utilisant les mêmes noms de fichiers qu’auparavant. De cette façon, toutes vos pages afficheront les nouvelles images une fois que le navigateur aura effacé le cache ou que vous aurez actualisé la page.
La même chose fonctionne pour chacun des liens. Ma recommandation est de nommer chacun.fichier htm, « Maison 1.htm » et « House2.htm » et ainsi de suite. De cette façon, tout ce que vous avez à faire est de mettre à jour le contenu dans le.les fichiers htm et les liens dans le rotateur d’images pointeront automatiquement vers le nouveau contenu.