Problema con los punteros.

Hola a todos.

Tengo una duda concreta de programación, la web intento que se pueda personalizar, una de las cosas que quiero personalizar son lo punteros, he puesto 4 botones para que se puedan cambiar el puntero cuando uno quiera, a parte de internet explorer en los demás no navegadores no funciona el cambio, se que los . ani solo funcionan en el explorer (eso creo), pero tengo dos .cur que si deberían funcionar en firefox, chrome…

Index.html (html)

<div id="Divmul1" onClick="change1()"><img title="" src="imagenes/juegos/puntero1peq.png" alt="LIGHTS OF HEAVEN" width=20 height=20 hspace=5 vspace=5 border=0></div>
<div id="Divmul2" onClick="change2()"><img title="" src="imagenes/juegos/puntero1peq.png" alt="WAVY TATIL CURSOR" width=20 height=20 hspace=5 vspace=5 border=0></div>
<div id="Divmul3" onClick="change3()"><img title="" src="imagenes/juegos/puntero1peq.png" alt="PERFECT WORLD ONLINE SPEAR THINGY" width=20 height=20 hspace=5 vspace=5 border=0></div>
<div id="Divmul4" onClick="change4()"><img title="" src="imagenes/juegos/puntero1peq.png" alt="COOL BLUE OUTER GLOW POINTER" width=20 height=20 hspace=5 vspace=5 border=0></div>

Estilo.css (css)

#Divmul1 { position:absolute; left:495px; top:0px; width:30px; height:30px; z-index:10; margin: 0px; padding: 0px; background-image: url(imagenes/teclas/boton.png);}
#Divmul2 { position:absolute; left:570px; top:0px; width:30px; height:30px; z-index:10; margin: 0px; padding: 0px; background-image: url(imagenes/teclas/boton.png);}
#Divmul3 { position:absolute; left:645px; top:0px; width:30px; height:30px; z-index:10; margin: 0px; padding: 0px; background-image: url(imagenes/teclas/boton.png);}
#Divmul4 { position:absolute; left:720px; top:0px; width:30px; height:30px; z-index:10; margin: 0px; padding: 0px; background-image: url(imagenes/teclas/boton.png);}

Onlo.js (javascript)

function change1(){ document.body.style.cursor="url('http://cur.cursors-4u.net/others/oth-6/oth528.ani')";}
function change2(){ document.body.style.cursor="url('http://cur.cursors-4u.net/cursors/cur-1/cur18.ani')";}
function change3(){ document.body.style.cursor="url('http://ani.cursors-4u.net/food/foo-7/foo643.cur')";}
function change4(){ document.body.style.cursor="url('http://ani.cursors-4u.net/food/foo-7/foo648.cur')";}

¿Alguna idea de lo que puede fallar?

Gracias y saludos.

Prueba así:

function change3(){ document.body.style="cursor: url(http://ani.cursors-4u.net/food/foo-7/foo643.cur)";}

O así:

function change1(){ document.body.style.cursor="url('http://cur.cursors-4u.net/others/oth-6/oth528.ani'), help";}

O así:

function change1(){ document.body.style="cursor: url('http://cur.cursors-4u.net/others/oth-6/oth528.ani'), help";}

Suerte!

Hola:

Otra forma de hacerlo sería a través de los estilos:

<div id="Divmul1"><img title="" src="imagenes/juegos/puntero1peq.png" alt="LIGHTS OF HEAVEN" width=20 height=20 hspace=5 vspace=5 border=0></div>
<div id="Divmul2"><img title="" src="imagenes/juegos/puntero1peq.png" alt="WAVY TATIL CURSOR" width=20 height=20 hspace=5 vspace=5 border=0></div>
<div id="Divmul3"><img title="" src="imagenes/juegos/puntero1peq.png" alt="PERFECT WORLD ONLINE SPEAR THINGY" width=20 height=20 hspace=5 vspace=5 border=0></div>
<div id="Divmul4"><img title="" src="imagenes/juegos/puntero1peq.png" alt="COOL BLUE OUTER GLOW POINTER" width=20 height=20 hspace=5 vspace=5 border=0></div>

<style type="text/css" media="screen">
#Divmul1 img:hover {
cursor: url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), auto;
}

#Divmul2 img:hover {
cursor: url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), auto;
}

#Divmul3 img:hover {
cursor: url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), auto;
}

#Divmul4 img:hover {
cursor: url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), auto;
}
</style>

Puedes especificar más de un cursor separando por comas cada url:

<style type="text/css" media="screen">
#Divmul1 img:hover {
cursor: url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), auto;
}

#Divmul2 img:hover {
cursor: url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), auto;
}

#Divmul3 img:hover {
cursor: url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), auto;
}

#Divmul4 img:hover {
cursor: url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), url('http://ani.cursors-4u.net/food/foo-7/foo643.cur'), auto;
}
</style>

Aquí hay un ejemplo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&…

Saludos.

Gracias a Web-Freelance y a skaparte, casi lo he conseguido, pero hay un problema añadido que no he podido solventar.

Este es el css del index :

body {
background-image:url("imagenes/fondos/fondo1.jpg");
background-repeat: no-repeat;
background-position:top;

width: 1600px;
height:1200px;

position:inherit;
top:50%;
left:50%;
color: #387ADB;
background-color:#000000;

scrollbar-face-color:#99CCFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-3dlight-color:#99CCFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-track-color:#99CCFF;
}

esto es un div con una funcion "shockwave-flash ", es como un juego simple, lo he usado como fondo de pantalla interactivo (unos peces que les puedes dar de comor con el mouse), pero no interfiere con la botonera porque le he puesto un z-index:-100

<div id="peces" style="display:none;">
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/f…" width="1600" height="1200">
<param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/f…"/>
<param name="AllowScriptAccess" value="always"/>
<param name="wmode" value="opaque"/>
<param name="scale" value="noscale"/>
<param name="salign" value="tl"/>

(el css del flash)

#peces { background-color:"transparent"; position:absolute; top:50%; left:50%; margin-top:-600px; margin-left:-800px; z-index:-100;}

pero el problema es que interfiere con los mouse personalizados, dependiendo de que navegador se use, interfiere mas o menos, el modo que no interfiera(o interfiera menos) era poner el body con un tamaño de 0px solo cuando se aplicara el fondo flash y que luego recupera su tamaño normal, pero no he sabido hacerlo, auque lo he intentado y me acercado con los if..

.....resumiendo..... un follon de narices que llevo dos dias con esa "personalizacion" que por el momento he dejado aparcada...