Come inserire tre immagini che fluttuano casualmente nel blog con link a pagine o siti.

Movimento casuale di oggetti

Clicca sull'immagine per andare alla Demo

Andate su Design > Modifica HTML, salvate il modello completo e cercate la riga </head>. Immediatamente sopra incollate questo codice

<!--Movimento Casuale Inizio-->
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/movimento.js' type='text/javascript'/>
<script type='text/javascript'> var immaginea, immagineb, immaginec
function pagestart(){ immaginea=new ipcj1(&quot;immaginea&quot;,70,82);
immagineb=new ipcj1(&quot;immagineb&quot;,50,60);
immaginec=new ipcj1(&quot;immaginec&quot;,30,40);
idpceinmov3(&quot;immaginea&quot;);
idpceinmov3(&quot;immagineb&quot;);
idpceinmov3(&quot;immaginec&quot;);
} if (window.addEventListener)
window.addEventListener(&quot;load&quot;, pagestart, false)
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, pagestart)
else if (document.getElementByid)
window.onload=pagestart </script>
<noscript><a href='http://goo.gl/r34sm' target='_blank'>Moto casuale oggetti</a></noscript>
<!--Movimento Casuale Fine - www.ideepercomputeredinternet.com-->

Salvate il modello. Adesso andate su Design > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollate il seguente codice
<div id="immaginea" style="position:absolute; left: -300px; width:70; height:70;">
<a href="URL PAGINA 1"><img src="URL IMMAGINE 1" border="0" /></a></div>
<div id="immagineb" style="position:absolute; left: -400px; width:70; height:70;">
<a href="URL PAGINA 2"><img src="URL IMMAGINE 2" border="0" /></a></div>
<div id="immaginec" style="position:absolute; left: -500px; width:70; height:70;">
<a href="URL PAGINA 3"><img src="URL IMMAGINE 3" border="0" /></a></div>

in Sezioni del Sito. Salvate l'elemento. Al posto di URL PAGINA X può essere inserito un collegamento a una pagina che richiama l'immagine mentre in URL IMMAGINE X va sostituito l'URL delle tre immagini dopo che sono state caricate su un servizio gratuito tipo Picasa.

Una idea sarebbe quella di prendere tre icone di social network come Twitter, Facebook e MySpace e collegarle ciascuna al proprio Profilo. Le immagini rendono molto meglio se sono su sfondo trasparente quindi in formato PNG o analogo. Se si hanno delle immagini di diverse dimensioni si può variare il valore di width: 70 e height: 70.

Ho pubblicato in rete una demo dell'effetto. Questo effetto è particolarmente suggestivo solo se installato su un blog che abbia un modello che non inserisca automaticamente un bordo alle immagini.
 Nella pagina di demo, se cliccate su una immagine, sarete indirizzati alla pagina web a cui l'ho collegata. Gli oggetti in formato PNG rimbalzano quando arrivano alla fine del layout del blog. Chi ha un blog con dominio personalizzato carichi su DropBox, o analogo, il javascript colorato di rosso.