1

Objetivo: Al pulsar los botones, espada, hacha, etc, el estilo del cursor cambie por una imagen. PD: En el código js solo hice los dos primeros inputs pero no funcionan.

HTML

<!doctype html>
<html>
<head>
 <script src="DH18.js"></script>
 <link rel="StyleSheet" href="DH18.css" type="text/css">
</head>
<body>
 <input type="button" value="Espada" id="bespada">
 <input type="button" value="Hacha" id="bhacha">
 <input type="button" value="Lanza" id="blanza">
 <input type="button" value="Arco" id="barco">
 <input type="button" value="Magia" id="bmagia">
</body>
</html>

JS

window.addEventListener('load', iniciar, false);

function iniciar(){
  var espada=document.getElementById('bespada');
  var hacha=document.getElementById('bhacha');
  var lanza=document.getElementById('blanza');
  var arco=document.getElementById('barco');
  var magia=document.getElementById('bmagia');
  espada.addEventListener('click', mouseEspada, false);
  hacha.addEventListener('click', mouseHacha, false);
  lanza.addEventListener('click', mouseLanza, false);
  arco.addEventListener('click', mouseArco, false);
  magia.addEventListener('click', mouseMagia, false);
 }

function mouseEspada(e){
var cuerpo=document.getElementsByTagName('html');
cuerpo.style.cursor="url('ragnell.png'),auto";
}

function mouseHacha(e){
var cuerpo=document.getElementsByTagName('html');
cuerpo.style.cursor="url('hacha.png'),auto";
}
2
  • Igual que en la otra pregunta, tienes que poner el cursor genérico: elemento.style.cursor = "url('tucursor.png'),auto"
    – user7176
    Commented el 11 ago. 2017 a las 21:07
  • si coloco exactamente esto: var cuerpo=document.getElementsByTagName('html'); cuerpo.style.cursor="url("hacha.png"),auto"; No funciona. Si lo pongo sin comillas y con auto, tampoco Commented el 11 ago. 2017 a las 21:14

1 respuesta 1

2

El error que tienes es que document.getElementsByTagName, devuelve una lista de elementos con un nombre determinado, es decir, un pseudo-array de elementos que deberías iterar para poder modificar sus propiedades.

Solución:

Si quieres modificar las propiedades del elemento html, puedes hacerlo a través de document.documentElement.

Ejemplo:

window.addEventListener('load', iniciar, false);

function iniciar() {
  var espada = document.getElementById('bespada');
  var hacha = document.getElementById('bhacha');
  var lanza = document.getElementById('blanza');
  var arco = document.getElementById('barco');
  var magia = document.getElementById('bmagia');
  espada.addEventListener('click', mouseEspada, false);
  hacha.addEventListener('click', mouseHacha, false);
  //lanza.addEventListener('click', mouseLanza, false);
  //arco.addEventListener('click', mouseArco, false);
  //magia.addEventListener('click', mouseMagia, false);
}

function mouseEspada(e) {
  document.documentElement.style.cursor = "url('https://image.flaticon.com/icons/png/128/118/118318.png'),auto";
}

function mouseHacha(e) {
  document.documentElement.style.cursor = "url('http://icon-icons.com/icons2/37/PNG/128/smallax_peque%C3%B1a_4378.png'),auto";
}
<input type="button" value="Espada" id="bespada">
<input type="button" value="Hacha" id="bhacha">
<input type="button" value="Lanza" id="blanza">
<input type="button" value="Arco" id="barco">
<input type="button" value="Magia" id="bmagia">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.