16 novembre 2009

Come inserire un effetto multicolore ai link puntati dal mouse nel nostro blog su Blogger.

Prima di illustrare il metodo su come inserire questa personalizzazione che chiameremo "Multi Color Hover" forse è meglio inserire una animazione in SWF di quello che vedrete nel vostro blog

L'oggetto in flash non può essere visualizzato perché il file era stato caricato su MyDatanest che ha cessato di esistere

Tale animazione è stata aggiunta seguendo il metodo spiegato nel post "Come inserire un oggetto in SWF". In sostanza quando con il mouse punta un collegamento si vede non un semplice cambio di colore ma una moltitudine di colori che mutano ad una velocità prestabilita.
Per inserire questo effetto andate in Layout > Modifica HTML e cercate la riga </head>, quindi, immediatamente sopra, inserite il seguente codice


<script type='text/javascript'>
//<![CDATA[
var rate = 15;
if (document.getElementById)
  window.onerror=new Function("return true")

var objActive;  // The object which event occured in
  var act = 0;    // Flag during the action
  var elmH = 0;   // Hue
  var elmS = 128; // Saturation
  var elmV = 255; // Value
  var clrOrg;     // A color before the change
  var TimerID;    // Timer ID

if (document.all) {
  document.onmouseover = doRainbowAnchor;
  document.onmouseout = stopRainbowAnchor;
  }
  else if (document.getElementById) {
  document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  document.onmouseover = Mozilla_doRainbowAnchor;
  document.onmouseout = Mozilla_stopRainbowAnchor;
  }

function doRainbow(obj)
  {
  if (act == 0) {
  act = 1;
  if (obj)
  objActive = obj;
  else
  objActive = event.srcElement;
  clrOrg = objActive.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }

function stopRainbow()
  {
  if (act) {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }

function doRainbowAnchor()
  {
  if (act == 0) {
  var obj = event.srcElement;
  while (obj.tagName != 'A' && obj.tagName != 'BODY') {
  obj = obj.parentElement;
  if (obj.tagName == 'A' || obj.tagName == 'BODY')
  break;
  }

if (obj.tagName == 'A' && obj.href != '') {
  objActive = obj;
  act = 1;
  clrOrg = objActive.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }
  }

function stopRainbowAnchor()
  {
  if (act) {
  if (objActive.tagName == 'A') {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }
  }

function Mozilla_doRainbowAnchor(e)
  {
  if (act == 0) {
  obj = e.target;
  while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
  obj = obj.parentNode;
  if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
  break;
  }

if (obj.nodeName == 'A' && obj.href != '') {
  objActive = obj;
  act = 1;
  clrOrg = obj.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }
  }

function Mozilla_stopRainbowAnchor(e)
  {
  if (act) {
  if (objActive.nodeName == 'A') {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }
  }

function ChangeColor()
  {
  objActive.style.color = makeColor();
  }

function makeColor()
  {
  // Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
  if (elmS == 0) {
  elmR = elmV;    elmG = elmV;    elmB = elmV;
  }
  else {
  t1 = elmV;
  t2 = (255 - elmS) * elmV / 255;
  t3 = elmH % 60;
  t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
  elmR = t1;  elmB = t2;  elmG = t2 + t3;
  }
  else if (elmH < 120) {
  elmG = t1;  elmB = t2;  elmR = t1 - t3;
  }
  else if (elmH < 180) {
  elmG = t1;  elmR = t2;  elmB = t2 + t3;
  }
  else if (elmH < 240) {
  elmB = t1;  elmR = t2;  elmG = t1 - t3;
  }
  else if (elmH < 300) {
  elmB = t1;  elmG = t2;  elmR = t2 + t3;
  }
  else if (elmH < 360) {
  elmR = t1;  elmG = t2;  elmB = t1 - t3;
  }
  else {
  elmR = 0;   elmG = 0;   elmB = 0;
  }
  }

elmR = Math.floor(elmR).toString(16);
  elmG = Math.floor(elmG).toString(16);
  elmB = Math.floor(elmB).toString(16);
  if (elmR.length == 1)    elmR = "0" + elmR;
  if (elmG.length == 1)    elmG = "0" + elmG;
  if (elmB.length == 1)    elmB = "0" + elmB;

elmH = elmH + rate;
  if (elmH >= 360)
  elmH = 0;

return '#' + elmR + elmG + elmB;
  }

//]]>
</script>
Salvate il modello e la personalizzazione è completa. Volendo si può modificare la velocità del cambiamento del colore del link agendo su 
var rate = 15;
A numero più alto (p.e. 20) corrisponde una maggiore velocità nel cambiamento dei colori.
Questo articolo mi è stato ispirato da "Add Multi-Color Effect for your links on hover for Bloggers blogs" ed è disponibile anche un blog demo per vedere l'effetto dal vivo e dal quale ho registrato le immagini ad inizio pagina.


10 commenti:

  1. ciao parsifal,il risultato e' molto bello, come al solito i tuoi suggerimenti sono oro colato,grazie di tutto.

    RispondiElimina
  2. @alfonso
    per così poco... figurati :)

    RispondiElimina
  3. C'è qualcosa di simile per Wordpress?

    grazie Parsifal32

    RispondiElimina
  4. Ciao Parsifal come va?
    Io sto di nuovo combattendo con l'ennesimo cambio template e ti volevo chiedere(in OT), ma se volessi ricercare dei post abbinati a 2 o 3 etichette contemporaneamente (in AND quindi) come posso fare?
    Non so perche' ma mi sembra una cosa così banale e non riesco a farla!!!
    Grazie!!
    Ciao
    Astasia

    RispondiElimina
  5. @Facemania
    Per WP ci sono migliaia di plugin, come certo saprai, però le mie conoscenze a riguardo non sono tali da poterti aiutare

    @Astasia
    Se ho capito bene tu vorresti mettere un collegamento in homepage a delle pagine di archivio che hanno due o più etichette in comune?
    Le pagine di archivio hanno una struttura del tipo
    http://nomeblog.blogspot.com/search/label/etichetta
    per riuscire ad inserirne due bisognerebbe fare delle modifiche mica da ridere ....
    Sono al di sopra delle mie capacità e volontà. Posso informarmi se c'è qualcosa nel web.
    Ciao

    RispondiElimina
  6. Ah ma allora non e' banale come pensavo...Cavoli o mi metto a ristrutturare tutte le label ma non sarebbe una cosa fatta bene...o ci rinuncio?
    Ho provato a cercare su google ma non ho trovato molto, c'e' anche da dire che non so esattamente come cercare...

    RispondiElimina
  7. @Astasia
    Io sono solo un dilettante e può essere pure che sia banale; però per la mia esperienza non ho mai visto una cosa di questo tipo. E' come trovare l'intersezione di due insiemi. E' probabile che esista un sistema per farlo però mi è ignoto.

    RispondiElimina
  8. Ciao,
    scusami, ma esisterebbe un modo per attivare qeusto effetto in un FBML per pagine facebook? Grazie in anticipo. (:

    RispondiElimina
  9. @Hamsters' fan
    Il linguaggio FBML è stato abbandonato da Facebook. Si possono inserire nuove tabelle con Static HTML: iframe tabs
    http://www.ideepercomputeredinternet.com/2011/05/static-html-iframe-tabs-per-creare.html
    E' presente anche la sezione in cui inserire il Javascript e il CSS quindi potresti provare per vedere se salva l'effetto.

    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.