Change cursor image

Question

Change cursor image

Navigation

#1 by (2 votes)

0

Objective: When pressing the buttons, sword, ax, etc., the style of the cursor changes to an image. PS: In the js code I only made the first two inputs but they do not work.

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";
}

javascript

asked by Vendetta 11.08.2017 в 22:56

source

1 answer

Bootstrap manners are not shown on my div that loads all my content with ajax I have this error: error you have an error in your sql syntax check the

score 2 · Accepted Answer

The error you have is that document.getElementsByTagName , returns a list of elements with a specific name, that is, a pseudo-array of elements that you should iterate in order to modify their properties.

Solution:

If you want to modify the properties of the html element, you can do it through document.documentElement .

Example:

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">