11540 sujets

JavaScript, DOM et API Web HTML5

Changer le cursor sur un <object>

C'est encore moi, avec un nouveau point bloquant.

Je rappelle le code de mon <body> avec un <canvas> puis une succession de <div> contenant un <object> de type SVG (je n'en ai mis qu'une ici pour simplifier) :

  <body onload="load()">
    <canvas id="chalkboardcanvas">
    <img id="chalkboardimg" src="blackboard-backgrounds-wallpapers.jpg" alt="chalkboardimg"/>
    </canvas>
    <div id="demandedevisdiv">
        <object id="demandedevissvg" data="demandedevis.svg" type="image/svg+xml"></object>
    </div>
  </body>


Au load() voilà ce que je fais, maintenant les méthodes resize fonctionnent bien, et j'ajoute donc un listening sur l'entrée et la sortie de mon <object> pour commuter l'aspect du cursor

    function load()
    {
      resize();
      document.getElementById('demandedevissvg').addEventListener('mouseover', function(evt){evt.preventDefault(); evt.stopPropagation(); document.body.style.cursor = "pointer";}, false);
      document.getElementById('demandedevissvg').addEventListener('mouseout', function(evt){document.body.style.cursor = "";}, false);
    }


Je précise que j'ai tout tenté, les CSS, le :active, le code direct 

    <div id="demandedevisdiv" onmouseover="..." onmouseout="...">
...
    </div>

le 

document.body.style.cursor 
evt.target.style.cursor
document.getElementById('demandedevisdiv').style.cursor
document.getElementById('demandedevissvg').style.cursor

l'application non plus à la <div id="demandedevisdiv"> mais à l' <object id="demandedevissvg">

rien n'y fait, le curseur reste celui par défaut. Parfois, je vois le cursor qui change imperceptiblement juste à la frontière de ma div, une fraction de seconde, je vois un 'pointer'

Je précise que je j'ajoute un alert('on/off'); les événements mouseover et mouseout sont bien déclenchés.

ALORS ? Une idée pour faire avancer le truc ?
Est-ce que les z-index ont une incidence sur les événements ?

Autre comportement étrange, le addEventListener sur l'évènement 'click' sur une div ne fait rien, même pas l'alert.

      document.getElementById('contactdiv').addEventListener('click', function(evt) {
        alert('contact');
        document.getElementById('adressediv').style.display = 'block';
      });

Alors que si je le remplace par 'mouseover' tout se passe nikel, j'ai mon alert et ma div cachée apparaît bien.

      document.getElementById('contactdiv').addEventListener('mouseover', function(evt) {
        alert('contact');
        document.getElementById('adressediv').style.display = 'block';
      });


Du coup j'en arrive à m'interroger sur les mouseevent combiné avec les z-index.
Sujet clos
Aller à