4 gennaio 2011

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

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.



13 commenti:

  1. molto bello Ernesto... solo che non potrebbe dare fastidio a chi legge l'articolo? Però l'idea di mettere fb, yt e twitter è proprio carina, merci

    RispondiElimina
  2. @Soffio di Dea
    L'idea è molto carina. Non sono soddisfattissimo del risultato anche perché, come sai, non me la cavo troppo bene con foto e immagini :D

    RispondiElimina
  3. anno nuovo e molta carne sul fuoco
    prima di addentrarmi sui nuovi post vorrei farti notare che il widget dei commentatori perde i capelli .. se per capelli intendi i commenti io tra poco resterò pelato ... adesso segna 31 qlc tempo fa un numero maggiore
    diciamo che sono stempiato via !!
    ;-))
    ad ogni modo colgo l'occasione per farti i miei migliori auguri per un proficuo anno nuovo

    RispondiElimina
  4. @Tex Willer
    Auguri anche a te. Il widget dei commentatori subisce delle variazioni perché considera solo gli ultimi commenti. Quando c'è n'è uno nuovo non viene considerato uno vecchio. Forse alcuni tuoi commenti non rientrano più nel "range" di quelli presi in esame.

    RispondiElimina
  5. Molto bello! ma è possibile inserire più di 3 immagini? CIAO!

    RispondiElimina
  6. @Via Vai
    E' possibile inserirne due, più di tre no.
    Cia

    RispondiElimina
  7. Idea originale ma forse un po´ fastidiosa per chi vuole leggere il post,secondo me toglie la concentrazione nel leggere. Auguri per il nuovo anno ciao

    RispondiElimina
  8. @Ignazio
    E' chiaro che è tutta una questione di opinioni. A me per esempio danno fastidio i blog con la musica di sottofondo, ad altri invece piacciono. Questa personalizzazione può essere un modo per attrarre l'attenzione del navigatore e per fideizzarlo. Il fastidio può essere compensato dalla piacevole sorpresa :)
    Il problema è che è possibile installarlo solo nei blog che non inseriscono automaticamente i bordi alle immagini perché in questo caso è brutto.
    Ciao

    RispondiElimina
  9. che bello..ma se una persona che guarda il mio blog non vorrebbe piu visualizzarli?' c'è un modo per farl0??

    RispondiElimina
  10. @BrilliDiLuce
    No. Se si mettono li vedono tutti. Lo si fa proprio per questo

    RispondiElimina
  11. @parsifal32
    Secondo me disturberebbe veramente troppo il lettore, ma sembra carina come idea! Ti devo chiedere una cosa.. nei commenti come si fa a mettere il "Rispondi"?

    RispondiElimina
  12. @Corvo Michele
    Ecco il tutorial
    http://www.ideepercomputeredinternet.com/2011/03/come-aggiungere-un-link-di-replica-nei.html

    RispondiElimina
  13. Come posso far rimbalzare le immagini in un div?

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.