Javascript per immagini casuali con link in un widget.

Come mostrare delle immagini casuali a rotazione con collegamenti a pagine interne o esterne utilizzando un javascript.

Con questo articolo intendo rispondere ad alcuni quesiti che mi sono stati posti nei commenti. L'esigenza di alcuni lettori è quella di mostrare in un widget in modo random una serie di immagini che se cliccate portino a un determinato articolo o comunque a una pagina interna o esterna al blog.

In questo modo i lettori che navigano più pagine del sito vengono a visualizzare immagini diverse ad ogni apertura di post con un collegamento sul quale possono cliccare. L'obiettivo di questa personalizzazione è quindi di mostrare dei contenuti in modo casuale e non ripetitivo.

Queste immagini random possono essere incollate anche in un post o in una pagina statica in Modalità HTML. Ho preferito postare un codice già completo di URL di immagini e di URL di link in modo da facilitare la personalizzazione. Il codice da incollare è il seguente

<script type="text/javascript">
  var imageUrls = [
     "https://lh3.googleusercontent.com/_nT13UtBmmiU/TVKiTDEQw3I/AAAAAAAARzc/HccMmqqA3kU/0217-8_007.jpg",
     "https://lh3.googleusercontent.com/_nT13UtBmmiU/TVKiTQpbvFI/AAAAAAAARzg/yF5VKsNR7rk/background_of_shells.jpg",
     "https://lh6.googleusercontent.com/_nT13UtBmmiU/TVKiT8NQKEI/AAAAAAAARzs/tyDM16VwAWE/mouettes1.jpg",
     "https://lh4.googleusercontent.com/_nT13UtBmmiU/TVKiaEzpopI/AAAAAAAARz0/zIZOPcN1HVc/red_maple.jpg",
     "https://lh3.googleusercontent.com/_nT13UtBmmiU/TVKiTtU6nFI/AAAAAAAARzo/5WwzZ4OO9YQ/greens_with_yellow_flower02.jpg"    
  ];
var imageLinks = [
      "http://www.ideepercomputeredinternet.com/search/label/android",
      "http://www.ideepercomputeredinternet.com/search/label/blogger",
      "http://www.ideepercomputeredinternet.com/search/label/immagini",
      "http://www.ideepercomputeredinternet.com/search/label/modello",
      "http://www.ideepercomputeredinternet.com/search/label/widget"    
  ];
  function getImageHtmlCode() {
    var dataIndex = Math.floor(Math.random() * imageUrls.length);
    var img = '<a href=\"' + imageLinks[dataIndex] + '"><img src="';       
    img += imageUrls[dataIndex];
    img += '\" alt=\"Immagini Casuali\"/></a>';
    return img;
  }
  document.write(getImageHtmlCode());
</script>

Gli URL colorati di rosso sono quelli delle immagini mentre gli URL colorati di viola sono quelli dei link collegati a ciascuna di esse. Su Blogger il codice si incolla su Layout > Aggiungi un gadget > Base >  HTML/Javascript > Sezioni del sito oppure nell'Editor del post in Modalità HTML.

Le immagini vanno caricate su Picasa e se ne deve ricavare l'URL diretto. Il javascript può essere incollato anche nel modello di Blogger. Per fare in modo che venga accettato in questo caso bisogna aggiungere due righe di codice subito sotto la prima e subito sopra l'ultima. Se invece di cinque immagini se ne vogliono inserire un numero diverso basterà togliere o aggiungere URL di immagini e i corrispondenti URL dei collegamenti. La prima immagine sarà linkata dal primo URL, la seconda dal secondo URL e così via per tutte le altre. Per testare il funzionamento del javascript basterà ricaricare questa pagina con F5 dopo che abbia però finito di caricarsi.

AGGIORNAMENTO: Questo widget è stato aggiornato e quello nuovo può essere installato in questo post.