Come personalizzare l'aspetto del cursore con una nostra immagine.

Come personalizzare con una nostra icona in formato PNG o animata in GIF l'aspetto che prende il cursore quando un lettore si trova in una pagina del nostro blog di Blogger o di Wordpress.

L'immagine del cursore dipende dall'oggetto HTML su cui passa sopra. In un modulo ha la forma di una barra verticale lampeggiante mentre quando passa sopra a un link prende l'aspetto di una mano con il dito indice che punta sul collegamento.

Si può personalizzare l'aspetto del mouse con i fogli di stile utilizzando i tag ne-resize, col-resize, progress, text, vertical-text, help., e-resize, se-resize, s-resize, sw-resize, nw-resize, w-resize, move, wait, crosshair, no-drop, row-resize, not-allowed che modificano l'aspetto del cursore in una parte del sito o anche in tutto.

In questo post mostrerò una personalizzazione che ho spesso visto nei blog amministrati da donne che amano molto avere il cursore con una immagine colorata. Queste blogger quasi sempre si rivolgono a siti specializzati che però offrono dei codici con il link al sito sorgente che potrebbe avere delle conseguenze negative dal lato SEO.

L'obiettivo quindi è quello di avere un codice di base in cui sostituire di volta in volta solo l'indirizzo della immagine che dovrà essere visualizzata nel puntatore del mouse.

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga </head>. Subito sopra si incolla questo codice

<!-- Personalizzazione cursore inizio -->
<script language='javascript'> 
//<![CDATA[
var skinableCursor = {   
    skinPath : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAh2S4B1e6hUHoXNphtQ1cPlmvy4H3i0pRTpd7LycsQmGHWUI_RqZWFv9yTwP-qEQPWBAawFy_GHurELKS0QwmbPUgoL6RYDe40aZB5YquRe2KGnk1tUBhYA2MDyag5ZGG2lnCiUP7OEo/s48/spider.gif',   
    IE : ( document.all && document.getElementById && !window.opera ),
    FF : (!document.all && document.getElementById && !window.opera),
    OP : (document.all && document.getElementById && window.opera),   
    cursor : {
        lt : { x : '0px',    y : '0px',    w : '19px',    h : '26px' ,    dx : -22,    dy : -22 },
        rt : { x : '19px',    y : '0px',    w : '26px',    h : '19px' ,    dx : -3,    dy : -22 },
        rb : { x : '26px',    y : '19px',    w : '19px',    h : '26px' ,    dx : 4,        dy : -3 },
        lb : { x : '0px',    y : '26px',    w : '26px',    h : '19px' ,    dx : -22,    dy : 4 }
    },   
    init : function () {
        skinableCursor.cursor.browserDelta = (skinableCursor.IE ? 2 : 0);
        if ( skinableCursor.FF || skinableCursor.OP ) {
            document.addEventListener("DOMContentLoaded", skinableCursor.domReady, false);
        }
        if ( skinableCursor.IE ) {
            document.write("<scr" + "ipt id=__ieinit defer=true " +
                "src=//:><\/script>");
            var script = document.getElementById("__ieinit");
            script.onreadystatechange = function() {
                if ( this.readyState != "complete" ) return;
                this.parentNode.removeChild( this );
                skinableCursor.domReady();
            };
            script = null;
        }
    },   
    domReady : function () {
        skinableCursor.create();
        if ( skinableCursor.FF || skinableCursor.OP ) {
            var s = document.createElement('style');
            s.innerHTML = '* { cursor: inherit; } html { height: 100%; } body, html { cursor: crosshair; }';
            document.body.appendChild(s);
            document.addEventListener('mousemove', skinableCursor.move, false);
        }
        if ( skinableCursor.IE ) {
            var s = document.createStyleSheet()
            s.addRule("*", "cursor: inherit");
            s.addRule("body", "cursor: crosshair");
            s.addRule("html", "cursor: crosshair");
            document.attachEvent('onmousemove', skinableCursor.move);
        }
        var anchors = document.getElementsByTagName('a');
        for (x = 0; x < anchors.length; x++) {
            if ( skinableCursor.FF || skinableCursor.OP ) {
                anchors[x].addEventListener('mousemove', skinableCursor.events.anchor, false);
                anchors[x].addEventListener('mouseout', skinableCursor.events.show, false);
            }
            if ( skinableCursor.IE ) {
                anchors[x].attachEvent('onmousemove', skinableCursor.events.anchor);
                anchors[x].attachEvent('onmouseout', skinableCursor.events.show);
            }
        }
    },   
    create : function () {
        function create(el, d) {
            el.style.position = 'absolute';
            el.style.overflow = 'hidden';
            el.style.display = 'none';
            el.style.left = d.x;
            el.style.top = d.y;
            el.style.width = d.w;
            el.style.height = d.h;
            if ( skinableCursor.IE ) {
                el.innerHTML = '<img src="' + skinableCursor.skinPath + '" style="margin: -' + d.y + ' 0px 0px -' + d.x + '">';
            } else {
                el.style.background = 'url(' + skinableCursor.skinPath + ') -' + d.x + ' -' + d.y;
            }
            return el;
        }
        var c = skinableCursor.cursor;
        c.lt.el = create(document.createElement('div'), c.lt);
        c.rt.el = create(document.createElement('div'), c.rt);
        c.rb.el = create(document.createElement('div'), c.rb);
        c.lb.el = create(document.createElement('div'), c.lb);
        document.body.appendChild(c.lt.el);
        document.body.appendChild(c.rt.el);
        document.body.appendChild(c.rb.el);
        document.body.appendChild(c.lb.el);
    },   
    move : function (e) {
        function pos(el, x, y) {
            el.el.style.left = x + el.dx + 'px';
            el.el.style.top = y + el.dy + 'px';
        }
        function hide(el, x, y) {
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;
            var deltaX = w - (x + el.dx + parseInt(el.w) - skinableCursor.cursor.browserDelta);
            var deltaY = h - (y + el.dy + parseInt(el.h) - skinableCursor.cursor.browserDelta);
            if (!skinableCursor.noSkin) {
                el.el.style.display = deltaX > 0 ? (deltaY > 0 ? 'block' : 'none') : 'none';
            }
        }
        var p = skinableCursor.getMousePosition(e);
        var s = skinableCursor.getScrollPosition();
        var c = skinableCursor.cursor;
        var x = p.x + s.x - c.browserDelta;
        var y = p.y + s.y - c.browserDelta;
        hide(c.lt, p.x, p.y);
        hide(c.rt, p.x, p.y);
        hide(c.rb, p.x, p.y);
        hide(c.lb, p.x, p.y);
        pos(c.lt, x, y);
        pos(c.rt, x, y);
        pos(c.rb, x, y);
        pos(c.lb, x, y);
    },   
    getMousePosition : function (e) {
        e = e ? e : window.event;
        var position = {
            'x' : e.clientX,
            'y' : e.clientY
        }
        return position;
    },   
    getScrollPosition : function () {
        var x = 0;
        var y = 0;
        if( typeof( window.pageYOffset ) == 'number' ) {
            x = window.pageXOffset;
            y = window.pageYOffset;
        } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
            x = document.documentElement.scrollLeft;
            y = document.documentElement.scrollTop;
        } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
            x = document.body.scrollLeft;
            y = document.body.scrollTop;
        }
        var position = {
            'x' : x,
            'y' : y
        }
        return position;
    },   
    events : {
        anchor : function (e) {
            skinableCursor.noSkin = true;
            document.body.style.cursor = 'pointer';
            var c = skinableCursor.cursor;
            c.lt.el.style.display = 'none';
            c.rt.el.style.display = 'none';
            c.rb.el.style.display = 'none';
            c.lb.el.style.display = 'none';
        },
        show : function () {
            skinableCursor.noSkin = false;
            document.body.style.cursor = 'crosshair';
        }
    }
}
skinableCursor.init();
//]]>
</script>
<!-- Personalizzazione cursore fine -->

Si salva il modello. La personalizzazione da effettuare è solo quella dell'indirizzo della immagine colorato di rosso che si visualizzerà nel cursore insieme a un puntatore a forma di croce.

Si può scegliere l'URL diretto di una immagine in formato PNG o anche di una immagine animata in formato GIF. Per un trucco su come caricare e eventualmente ridimensionare l'immagine su Blogger, e quindi Google Foto, leggete il post seguente

Come caricare icone su Blogger e averne il link diretto

Questo hack funziona anche per i blog su Wordpress e su altre piattaforme di blogging.