Cursore seguito da un immagine

Eccovi una piccola chicca su come personalizzare il cursore nel vostro blog : si tratta di aggiungere un immagine che segue il cursore ( Guarda la demo clicca ) potete scegliere tra migliaglia di immagini ,anche animate , il servizio prevede l’inserimento di un codice nel vostro template ,ma ho modificato un vecchio codice che possiamo utilizzare senza dover mettere le manine nel template ,utilizzando un comune elemento pagina Html/javascript .Per fare questo basta seguire questo piccolo procedimento : il codice fornito dal servizio e’ questo:

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-11/gam1088.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2010/02/24/flyff-chinese-index-finger-point.html" target="_blank" title="Flyff Chinese Index Finger Point"><img src="http://cursors-4u.com/support.gif" border="0" alt="Flyff Chinese Index Finger Point" style="position:absolute; top: 0px; right: 0px;" /></a>

Questo codice dovrebbe essere inserito nel template ,ma noi evitiamo di farlo utilizzando un widget Html/javascript .Il codice da inserire in un widget e’ quello che vedi sotto Dal codice sopra prendete solo la parte che vedete evidenziata in rosso ,cioe’ con l’estensione .cur e’ sostituitela nella parte evidenziata in blu se non vi piace l’immagine che ho inserito .Fatto questo ora potete scegliere qualsiasi immagine che vi piace su questo servizio che trovi qui .Poi a vostro piacere potete utilizzare il sistema standard fornito dal servizio ,la mia e’ solo un alternativa piu’ semplice da mettere in pratica senza dover manipolare il codice del template .Se ti interessa sapere come creare un effetto opaco nelle immagini leggi qui

<script type="text/javascript">
//<![CDATA[
var blimgcursor=["http://cur.cursors-4u.net/games/gam-11/gam1088.cur", , ]
var blimgespacio=[12,12]
var blimgcursor_cuant=0

if (document.getElementById || document.all)
document.write('<div id="blimgcursorid" style="position:absolute;visibility:visible;left:0px;top:100px;width:1px;height:1px"><img border="0" src="'+blimgcursor[0]+'"></div>')
function blimgcur_activo(){
if (document.getElementById)
return document.getElementById("blimgcursorid").style
else if (document.all)
return document.all.trailimagid.style
}
function blcentro(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function blinvis_img(){
blimgcur_activo().visibility="hidden"
document.onmousemove=""
}
function blimg_curseg(e){
var xcoord=blimgespacio[0]
var ycoord=blimgespacio[1]
if (typeof e != "undefined"){
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined"){
xcoord+=blcentro().scrollLeft+event.clientX
ycoord+=blcentro().scrollTop+event.clientY
}
var docwidth=document.all? blcentro().scrollLeft+blcentro().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(blcentro().scrollHeight, blcentro().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+blimgcursor[1]+3>docwidth || ycoord+blimgcursor[2]> docheight)
blimgcur_activo().display="none"
else
blimgcur_activo().display=""
blimgcur_activo().left=xcoord+"px"
blimgcur_activo().top=ycoord+"px"
}
document.onmousemove=blimg_curseg
if (blimgcursor_cuant>0)
setTimeout("blinvis_img()", blimgcursor_cuant*1000)
//]]>
</script>