» » » Cursore seguito da un immagine

Cursore seguito da un immagine

,

 cursore animatoEccovi 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>

Related Posts