A volte una singola immagine non è sufficiente per mostrare tutto ciò che si desidera promuovere sul tuo sito. Se vi siete mai chiesti come alcuni siti ottenere diverse immagini per ruotare e ti piacerebbe farlo da soli, beh, non chiedo più. Sono qui per mostrarti come si fa. Inoltre, come ulteriore vantaggio, ti mostrerò come puoi aggiornare le tue immagini in un’unica posizione e far apparire tali aggiornamenti a livello globale sul tuo sito.
Supponiamo che tu abbia un sito di cucina e desideri che le immagini dei cinque pasti più recenti che hai descritto ruotino nel banner. Oppure, diciamo che hai un sito immobiliare e vuoi che le immagini dei tuoi 10 annunci più recenti ruotino in un punto specifico su tutte le tue pagine. Per aggiungere funzionalità, si desidera che ogni immagine si colleghi a una pagina diversa. Tutto questo non è un problema con il seguente codice.
In primo luogo, è necessario organizzarsi. Raccogli tutte le tue immagini nella stessa cartella e assicurati che abbiano le stesse dimensioni. Se non hanno le stesse dimensioni e non vuoi distorcerle, ridimensiona semplicemente la tela di ogni immagine e non ridimensiona l’immagine stessa. In questo modo, il segnaposto in cui appaiono le immagini non cambierà forma quando apparirà ogni nuova immagine.
In secondo luogo, raccogliere tutti i link che si desidera associato con le immagini e salvarli da qualche parte conveniente in modo da poter copiare e incollare in un secondo momento.
In terzo luogo, è necessario incollare quanto segue nell’intestazione per ogni pagina in cui si desidera che appaia il rotatore dell’immagine:
<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>
A prima vista, questo codice può apparire intimidatorio. Tuttavia, tutto ciò che devi fare è aggiornare il percorso dei file di immagine e compilare gli URL per i collegamenti. Naturalmente, dovresti anche aggiornare gli attributi di altezza e larghezza per adattarli al tuo sito.
Se si desidera ruotare solo quattro immagini, è sufficiente eliminare una delle righe dell’elemento. Se si desidera aggiungere uno, quindi copiare e incollare e aggiornare gli elementi agli elementi e così via.
Ora hai gettato le basi per l’aggiunta di questo rotatore di immagini al tuo sito. Ma c’è un altro passo che devi fare per far apparire le tue immagini sulla pagina. Capire dove si desidera che le immagini a comparire sulla pagina e copiare in:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
Questo è tutto quello che c’è da fare. Quando ho iniziato a lavorare per aggiungere un rotatore di immagini al mio sito, non è stato facile come copiare e incollare. Ho esaminato diversi esempi di codice che ho trovato online. La maggior parte di loro non ha funzionato. Anche questo codice sopra non ha funzionato, ma poi ho apportato alcune modifiche qua e là e sono riuscito a farlo funzionare. Ho fatto la parte difficile per te. Ora tutto quello che dovete fare è aggiornare le immagini e link, fare un po ‘ di copia e incolla, e via si va.
Se si decide di utilizzare questo rotatore di immagini su diverse pagine all’interno del tuo sito e poi è necessario modificare le immagini e il contenuto è possibile farlo da una posizione. Tuttavia, questo richiede una certa pianificazione in anticipo. Torniamo all’esempio di un sito immobiliare. Quando si salvano le immagini, si consiglia di utilizzare la stessa convenzione per ogni immagine, ad esempio “House1.jpg ” e ” House2.jpg ” e così via. Quindi, quando si desidera mostrare una nuova serie di case, è sufficiente nominare le nuove immagini utilizzando gli stessi nomi di file di prima. In questo modo, tutte le tue pagine mostreranno le nuove immagini dopo che il browser cancella la cache o aggiorni la pagina.
Lo stesso funziona per ciascuno dei collegamenti. La mia raccomandazione è di nominare ciascuno .file htm, ” Casa1.htm ” e ” Casa2.htm ” e così via. In questo modo, tutto quello che dovete fare è aggiornare il contenuto all’interno del .i file htm e i collegamenti nel rotatore di immagini punteranno automaticamente al nuovo contenuto.