Home > Programmazione > Sostituzione immagini con javascript

Sostituzione immagini con javascript

Un effetto molto carino che si può fare con Javascript, è quello di poter cambiare una data immagine dopo che è passato un tot di tempo e facendola sostituire da un’altra immagine scelta in modo casuale.

Questo è uno script molto semplice e veloce, che però assicura un bel colpo d’occhio sui visitatori che vengono a vedere il nostro sito, e sicuramente suscita invidia ai pischelli che non hanno la minima idea di come si faccia XP

Non dilungiamoci oltre e partiamo subito con il codice, esso non è molto difficile, e si costituisce di un semplice script in javascript. Ma prima costruiamo la pagina .html dove dovranno essere visualizzate le immagini. La pagina potrete chiamarla come meglio preferite, non verrà richiamata in alcun modo dallo script Javascript, ma state attenti però a che valore assegnate all’id dell’immagine, perchè questi deve corrispondere a quello che passate allo script tramite la chiamata della funzione start(). Al suo interno saranno presenti alcuni richiami al codice Javascript, ma il grosso di questi sarà contenuto in un file a parte che richiameremo tramite apposito comando. Come al solito, non mi dilungo in altre spiegazioni, in quanto il codice già semplice di per se, è commentato in tutti i punti che possono risultare di difficile comprensione.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Pagina in cui facciamo cambiare l’immagine</title>
<!– Richiamiamo la pagina script.js nella quale si trova lo script Javascript –>
<script type=”text/javascript” src=”script.js”></script>
</head>
<!– All’interno del tag body, mettiamo l’evento onload che richiama la funzione start() appena la pagina html è stata completamente caricata.
All’interno della funzione start, tra ‘ ‘ mettiamo il nome dell’id al quale corrisponde l’immagine che desideriamo far cambiare nel tempo –>
<body onload=”start(‘immagine’)”>
<!–Immagine che cambierà nel tempo–>
<img src=”ciao.gif” id=”immagine”></div>
</body>
</html>

E dopo la pagina html che come avete visto è molto semplice, passiamo al cuore dello script vero è proprio.

// tempo di attesa tra un’immagine e un’altra espressa in millesimi di secondo
tempo = 7000;

// creiamo la variabile elemente che verrà poi utilizzata dentro la funzione start
elemento = “”;

// Array nel quale inserire gli url delle varie immagini che si desiderano far alternare. Si possono aggiungere quanti url si vogliono
immagini = new Array();
immagini[0]=’http://www.yappy.it/image/javascript/010/image/template_4.jpg';
immagini[1]=’http://www.yappy.it/image/javascript/010/image/template_2.jpg';
immagini[2]=’http://www.yappy.it/image/javascript/010/image/template_3.jpg';

function start(id){
//salva nella variabile elemento il tag img che corrisponde all’id passato
//N.B. L’elemento corrispondendente a quell’id deve esistere, in caso contrario lo script non funzionerà
elemento = window.document.getElementById(id);
//richiama la funzione immagine()
immagine();
}

function immagine(){
//Estrae un numero casuale tra 0 e la lunghezza dell’array – 1. Ad ogni valore
//corrisponde un dato url, tramite il ciclo do-while si controlla che il nuovo url non corrisponda al vecchio, se ciò
//si verifica, allora si provvede a far estrarre un altro numero, finchè gli url non sono diversi tra loro.

do{
num = Math.round((immagini.length-1)*Math.random());
}while(elemento.src == immagini[num]);
//Assegna l’url estratto in modo casuale all’immagine, cosi che l’utente possa visualizzare
//una nuova immagine sul proprio monitor

elemento.src = immagini[num];
//Richiama dopo il valore della variabile tempo la funzione immagine()
window.setTimeout(“immagine()”, tempo);
}

Abbiamo finito. Come avrete notato è qualcosa che è più lungo a dirsi che a farsi, in pochissimo tempo, abbiamo uno script molto carino e che porta una ventata di novità al nostro sito web.

Come al solito i miei codici sono scarni, sono composti dalla sola componente di script, cioè non hanno nessuna componente grafica. Quella starà a voi implementarla (è molto semplice farlo, basta avere conoscenze di html) come meglio vi piace. Lasciatemi pure i vostri commenti (è una cosa molto gradita), e chiedendomi chiarimenti o segnalandomi problemi, sarò molto felice di aiutarvi nell’apprendere sempre meglio il php e i linguaggi web in generale. E come al solito prima di salutarvi, vi invito a visitare il mio portfolio. Detto questo, buon lavoro e buona programmazione a tutti.

Peace and Code

P.S. Vi sarò grato se lascerete qualche commento, cosi che possa sapere se articoli del genere sono graditi all’utenza, ed eventualmente venire incontro alle vostre esigenze

About these ads
  1. Napoleone
    17 agosto 2008 alle 17:03

    è dura davvero…
    io non ce la fo proprio…
    mi riesce difficile tutto dopo la dicitura <!DOCTYPE!!!
    hehehe, non ce la fo

  2. dario
    11 settembre 2008 alle 23:35

    Vorrei inviarti il mio file html col tuo script incorporato. A me non sembra funzionare. Come posso mandartelo?
    Uno zip va bene?

  3. 13 settembre 2008 alle 08:47

    Cliccando sul mio nome entri nel mio portfolio… in fondo ad esso trovi la mia mail… mandami pure tutto a quella mail in un archivio zip

  4. phil
    17 gennaio 2009 alle 10:50

    MOlto interessante, una domanda però…non ho ben capito cosa devo assegnare a id nel file.html

  5. 17 gennaio 2009 alle 16:29

    Il valore dell’id altro non è che il nome con il quale identifichiamo quel determinato tag

  6. 23 aprile 2013 alle 20:04

    Have you ever thought about including a little bit more than just your articles?
    I mean, what you say is important and all. But think about if
    you added some great visuals or video clips to give your posts more,
    “pop”! Your content is excellent but with pics and clips,
    this site could undeniably be one of the greatest in its field.
    Great blog!

  7. 24 aprile 2013 alle 07:30

    I will immediately grab your rss as I can’t in finding your e-mail subscription link or e-newsletter service. Do you have any? Kindly permit me understand in order that I may subscribe. Thanks.

  8. VincenzoB
    17 maggio 2013 alle 17:10

    Ciao sto cimentandomi ora in javascript e trovo questo esempio davvero molto interessante! non riesco però a farlo partire..ho scritto html e script seguendo minuziosamente il tuo codice ma niente, le immagini non si susseguono. Volevo sapere principalmente due cose:

    1) gli url che ho inserito nell’array sono relativi: ho posizionato sia il file html che lo script nella stessa cartella, dove è presente un’altra cartella con le immagini. Quindi nell’array “immagini[]” ho inserito direttamente “immagini/nomeimmagine.jpg” come url per ogni immagine. E’ possibile che non funzioni con url relativi ma solo con quelli assoluti?

    2) ho scritto il codice dello script con Aptana Studio 3 e quando sono andato a scrivere la riga “elemento.src …” non mi dava in automatico appunto la parola “src” (cosa che di solito fa, ovvero in automatico mi da tutte le possibili “funzioncine” che posso assegnare ad un determinato elemento) il chè mi ha messo in allarme anche se comunque non mi da nessun errore.
    Volevo quindi sapere se è qualcosa di cui devo preoccuparmi oppure si tratta solo di una “funzioncina” che non è presente nella lista di Aptana? Esiste un altro metodo per aggirare questo errore (sempre che lo sia)?

    Grazie mille!
    Vincenzo

  9. VincenzoB
    17 maggio 2013 alle 17:13

    Ciao di nuovo, ti informo che ho risolto facendo ripartire semplicemente il browser ahahah (: Grazie ancora per l’esempio comunque, davvero molto utile!! Ciao!
    Vincenzo

  10. 7 giugno 2013 alle 22:41

    Hey there! This is my first visit to your blog! We are a collection
    of volunteers and starting a new project in a community in the same niche.
    Your blog provided us beneficial information to work on.
    You have done a wonderful job!

  11. 14 giugno 2013 alle 18:49

    When I originally left a comment I seem to have clicked the
    -Notify me when new comments are added- checkbox and
    from now on every time a comment is added I get four emails with the same comment.

    Is there a way you can remove me from that service?
    Appreciate it!

  12. 8 luglio 2013 alle 07:36

    Hi to every , because I am really eager of reading this weblog’s post to be updated on a regular basis. It contains good stuff.

  13. MDF
    2 agosto 2013 alle 21:41

    I leave a response each time I appreciate a article on a website or I have
    something to contribute to the conversation. It’s a result of the fire displayed in the article I browsed. And on this post Sostituzione immagini con javascript | Markus Blog. I was moved enough to post a comment ;) I actually do have a few questions for you if you don’t mind.
    Could it be simply me or does it look like
    like some of these responses appear like they are left by
    brain dead individuals? :-P And, if you are writing at
    additional social sites, I’d like to keep up with you. Could you list the complete urls of all your public sites like your twitter feed, Facebook page or linkedin profile?

  14. 28 novembre 2013 alle 05:37

    Thhe author’s look at i? that our ingesting conduct expresses our feelings, everyday living
    strategy, ?nd ev?n h?w w? view God. If ??u go ?n a small-calorie, large carbohydrate, lower protein eating plan,
    ??u c?n conveniently get rid of up t? 50% ?f your muscle
    tissue.

  15. 26 maggio 2014 alle 18:06

    Thank you for the auspicious writeup. It in fact
    was a amusement account it. Look advanced to far added
    agreeable from you! By the way, how could we communicate?

    My weblog – women building muscle (Joshua)

  16. 15 giugno 2014 alle 13:34

    ǥreat points altogether, you just woon a new
    reader. What might yoou suggest in regards to yοur submit that you simply maade a few days ago?
    Any certain?

  17. 21 giugno 2014 alle 22:37

    What’s Going down i am new to this, I stumbled upon this I’ve found It positively helpful and it has
    helped me out loads. I’m hoping to give a contribution & help different users like its aided
    me. Good job.

  18. 21 agosto 2014 alle 22:23

    Grazie infinite era parecchio che cercavo uno script così ^_^ Complimenti

  19. 27 agosto 2014 alle 12:58

    ӏ’m гeally insρired together wikth your writung talents as neatly aas with the layout in your weblog.
    Is this a paid subject or did you mοdify it yourself?
    Either way stay up thе excellent quality writing, it’s rare to look a nice blog like this onne nowadays..

    my website … grean coffee

  1. 16 maggio 2014 alle 21:32

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Iscriviti

Ricevi al tuo indirizzo email tutti i nuovi post del sito.

%d blogger cliccano Mi Piace per questo: