11540 sujets

JavaScript, DOM et API Web HTML5

Problème de cursor et de détection de click

Bonjour,

je réitère une question proche de la précédente. J'ai viré toute notion de canvas pour ne plus utiliser que des <div> que je viens dimensionner et positionner dynamiquement, les une par rapport aux autres, et toujours rien à faire, mes fonctions $("#contactdiv").mouseover(function(evt) {
et
$("#contactdiv").mouseout(function(evt) {
ne font pas ce que je voudrais, c'est à dire simplement transformer le curseur en pointeur. J'ai beau setter le .css("cursor", "pointer"); sur la <div>, sur l'<object>, sur <body> rien n'y fait le cursor reste inchangé (juste un flash default->pointer->default sur le mouseout.
Et d'autre part si le mouseover et le mouseout sont bien détecté, le click lui ne produit rien.

<!DOCTYPE html> 
<html>
  <head>
  <title>Sur ma table de chevet</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="surmatabledechevet.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  <body>
  <script type="text/javascript">

$(document).ready(function() {
  $(window).resize();
});
$(window).resize(function() {
  $.fn.resize_chalkboard();
  $.fn.resize_copyright();
  $.fn.resize_logo();
  $.fn.resize_slogan();
  $.fn.resize_quisommesnous();
  $.fn.resize_demandedevis();
  $.fn.resize_contact();
  $.fn.resize_adresse();

  $("#contactdiv").mouseover(function(evt) {
    $("#contactdiv").css("cursor", "pointer");
    $("#contactsvg").css("cursor", "pointer");
    evt.stopPropagation();
    //evt.target.css("border-style", "solid");
  });
  $("#contactdiv").mouseout(function(evt) {
    $("#contactdiv").css("cursor", "");
    $("#contactsvg").css("cursor", "");
    evt.stopPropagation();
    //evt.target.css("border-style", "none");
  });
  $("#contactdiv").click(function(evt) {
    alert("clic");
  });
});
  
$.fn.resize_chalkboard = function() 
{ 
  $('chalkboarddiv').css("z-index", "-1");
  $('chalkboardsvg').css("z-index", "-1");
  var w = $(window).innerWidth();
  var h = $(window).innerHeight();
  var wh = w/h;
  var w0 = 1920.0;
  var h0 = 1200.0;
  var w0h0 = w0/h0;
  if (wh > w0h0)
  {
    $('#chalkboardsvg').width(w*w0h0/wh);
    $('#chalkboardsvg').height(h);
    var marging = (w - $('#chalkboardsvg').width()) / 2.0;
    $('#chalkboarddiv').css("marginTop", "0px");
    $('#chalkboarddiv').css("marginBottom", "0px");
    $('#chalkboarddiv').css("marginLeft", marging + "px");
    $('#chalkboarddiv').css("marginRight", marging + "px");
  }
  else
  {
    $('#chalkboardsvg').width(w);
    $('#chalkboardsvg').height(h*wh/w0h0);
    var marging = (h - $('#chalkboardsvg').height()) / 2.0;
    $('#chalkboarddiv').css("marginTop", marging + "px");
    $('#chalkboarddiv').css("marginBottom", marging + "px");
    $('#chalkboarddiv').css("marginLeft", "0px");
    $('#chalkboarddiv').css("marginRight", "0px");
    $('#chalkboarddiv').css("z-index", "0");
  }
};

$.fn.resize_copyright = function() 
{
  $('copyrightdiv').css("z-index", "0");
  $('copyrightsvg').css("z-index", "0");
  var w0 = 1920.0;
  var h0 = 37.0;
  var w0h0 = w0/h0;
  $('#copyrightsvg').width($('#chalkboardsvg').width() * 0.5);
  $('#copyrightsvg').height($('#copyrightsvg').width() / w0h0);
  var marging = $('#chalkboardsvg').offset().top + $('#chalkboardsvg').height() - $('#copyrightsvg').height() - 15.0;
  $('#copyrightdiv').css("marginTop", marging + "px");
  $('#copyrightdiv').css("marginBottom", $('#chalkboarddiv').css("marginBottom"));
  $('#copyrightdiv').css("marginLeft", $('#chalkboarddiv').css("marginLeft"));
  $('#copyrightdiv').css("marginRight", $('#chalkboarddiv').css("marginRight"));
}
    
$.fn.resize_logo = function() 
{
  $('logodiv').css("z-index", "0");
  $('logosvg').css("z-index", "0");
  var w0 = 528.0;
  var h0 = 528.0;
  var w0h0 = w0/h0;
  $('#logosvg').width($('#chalkboardsvg').width() * 0.12);
  $('#logosvg').height($('#logosvg').width() / w0h0);
  var marginT = $('#chalkboardsvg').offset().top + 25.0;
  var marginL = $('#chalkboardsvg').offset().left + 0.25 * $('#logosvg').width();
  var marginB = $(window).innerHeight() - marginT - $('#logosvg').height();
  var marginR = $(window).innerWidth() - marginL - $('#logosvg').width();
  $('#logodiv').css("marginTop", marginT + "px");
  $('#logodiv').css("marginLeft", marginL + "px");
  $('#logodiv').css("marginBottom", marginB + "px");
  $('#logodiv').css("marginRight", marginR + "px");
  $('#logodiv').css("z-index", "2");
};

$.fn.resize_slogan = function() 
{
  $('slogandiv').css("z-index", "0");
  $('slogansvg').css("z-index", "0");
  var w0 = 481.0;
  var h0 = 58.0;
  var w0h0 = w0/h0;
  $('#slogansvg').width($('#chalkboardsvg').width() * 0.35);
  $('#slogansvg').height($('#slogansvg').width() / w0h0);
  var marginT = $('#logosvg').offset().top + 0.5 * ($('#logosvg').height() - $('#slogansvg').height());
  var logosvgR = $('#logosvg').offset().left + $('#logosvg').width();
  var marginL = logosvgR + (($('#chalkboardsvg').width() - $('#logosvg').width() - $('#slogansvg').width()) / 2.0);
  var marginB = $(window).innerHeight() - marginT - $('#slogansvg').height();
  var marginR = $(window).innerWidth() - marginL - $('#slogansvg').width();
  $('#slogandiv').css("marginTop", marginT + "px");
  $('#slogandiv').css("marginLeft", marginL + "px");
  $('#slogandiv').css("marginBottom", marginB + "px");
  $('#slogandiv').css("marginRight", marginR + "px");
};

$.fn.resize_quisommesnous = function() 
{
  $('quisommesnousdiv').css("z-index", "10");
  $('quisommesnoussvg').css("z-index", "10");
  var w0 = 528.0;
  var h0 = 528.0;
  var w0h0 = w0/h0;
  $('#quisommesnoussvg').width($('#chalkboardsvg').width() * 0.08);
  $('#quisommesnoussvg').height($('#quisommesnoussvg').width() / w0h0);
  var marginT = $('#logosvg').offset().top + 1.2 * $('#logosvg').height();
  var marginL = $('#logosvg').offset().left + 0.25 * $('#logosvg').width();
  var marginB = $(window).innerHeight() - marginT - $('#quisommesnoussvg').height();
  var marginR = $(window).innerWidth() - marginL - $('#quisommesnoussvg').width();
  $('#quisommesnousdiv').css("marginTop", marginT + "px");
  $('#quisommesnousdiv').css("marginLeft", marginL + "px");
  $('#quisommesnousdiv').css("marginBottom", marginB + "px");
  $('#quisommesnousdiv').css("marginRight", marginR + "px");
};

$.fn.resize_demandedevis = function() 
{
  $('demandedevisdiv').css("z-index", "10");
  $('demandedevissvg').css("z-index", "10");
  var w0 = 528.0;
  var h0 = 528.0;
  var w0h0 = w0/h0;
  $('#demandedevissvg').width($('#chalkboardsvg').width() * 0.08);
  $('#demandedevissvg').height($('#demandedevissvg').width() / w0h0);
  var marginT = $('#quisommesnoussvg').offset().top + 1.2 * $('#demandedevissvg').height();
  var marginL = $('#quisommesnoussvg').offset().left + 0.25 * $('#demandedevissvg').width();
  var marginB = $(window).innerHeight() - marginT - $('#demandedevissvg').height();
  var marginR = $(window).innerWidth() - marginL - $('#demandedevissvg').width();
  $('#demandedevisdiv').css("marginTop", marginT + "px");
  $('#demandedevisdiv').css("marginLeft", marginL + "px");
  $('#demandedevisdiv').css("marginBottom", marginB + "px");
  $('#demandedevisdiv').css("marginRight", marginR + "px");
};

$.fn.resize_contact = function() 
{
  $('contactdiv').css("z-index", "10");
  $('contactsvg').css("z-index", "9");
  var w0 = 528.0;
  var h0 = 528.0;
  var w0h0 = w0/h0;
  $('#contactsvg').width($('#chalkboardsvg').width() * 0.08);
  $('#contactsvg').height($('#contactsvg').width() / w0h0);
  var marginT = $('#demandedevissvg').offset().top + 1.2 * $('#demandedevissvg').height();
  var marginL = $('#demandedevissvg').offset().left + 0.25 * $('#contactsvg').width();
  var marginB = $(window).innerHeight() - marginT - $('#contactsvg').height();
  var marginR = $(window).innerWidth() - marginL - $('#contactsvg').width();
  $('#contactdiv').css("marginTop", marginT + "px");
  $('#contactdiv').css("marginLeft", marginL + "px");
  $('#contactdiv').css("marginBottom", marginB + "px");
  $('#contactdiv').css("marginRight", marginR + "px");
};

$.fn.resize_adresse = function() 
{
  $('adressediv').css("z-index", "0");
  $('adressesvg').css("z-index", "0");
  var w0 = 1042.0;
  var h0 = 367.0;
  var w0h0 = w0/h0;
  $('#adressesvg').width($('#chalkboardsvg').width() * 0.4);
  $('#adressesvg').height($('#adressesvg').width() / w0h0);
  var marginT = $('#demandedevissvg').offset().top;
  var logosvgR = $('#logosvg').offset().left + $('#logosvg').width();
  var marginL = logosvgR + (($('#chalkboardsvg').width() - logosvgR - $('#adressesvg').width()) / 2.0);
  var marginB = $(window).innerHeight() - marginT - $('#adressesvg').height();
  var marginR = $(window).innerWidth() - marginL - $('#adressesvg').width();
  $('#adressediv').css("marginTop", marginT + "px");
  $('#adressediv').css("marginLeft", marginL + "px");
  $('#adressediv').css("marginBottom", marginB + "px");
  $('#adressediv').css("marginRight", marginR + "px");
};
    </script>
    <div id="chalkboarddiv" class="unclickabledivsvg">
      <object id="chalkboardsvg" class="objectsvg" data="blackboard-backgrounds-wallpapers.jpg" type="image"></object>
    </div>
    <div id="logodiv" class="unclickabledivsvg">
      <object id="logosvg" class="objectsvg" data="logo.svg" type="image/svg+xml"></object>
    </div>
    <div id="slogandiv" class="unclickabledivsvg">
      <object id="slogansvg" class="objectsvg" data="slogan.svg" type="image/svg+xml"></object>
    </div>
    <div id="copyrightdiv" class="unclickabledivsvg">
      <object id="copyrightsvg" class="objectsvg" data="copyright.svg" type="image/svg+xml"></object>
    </div>
    <div id="quisommesnousdiv" class="clickabledivsvg">
      <object id="quisommesnoussvg" class="objectsvg" data="quisommesnous.svg" type="image/svg+xml"></object>
    </div>
    <div id="demandedevisdiv" class="clickabledivsvg">
      <object id="demandedevissvg" class="objectsvg" data="demandedevis.svg" type="image/svg+xml"></object>
    </div>
    <div id="contactdiv" class="clickabledivsvg">
      <object id="contactsvg" class="objectsvg" data="contact.svg" type="image/svg+xml"></object>
    </div>
    <div id="adressediv" class="unclickabledivsvg" style="display:none;">
      <object id="adressesvg" class="objectsvg" data="adresse.svg" type="image/svg+xml"></object>
    </div>
  </body>
</html>
En fait, je viens de découvrir que
1 - la souris en forme de pointer apparaît bien si je commente le retour à la souris normale dans le mouseout, et que je balade mon cursor sur mon image de fond, c'est à dire sur la 
    <div id="chalkboarddiv" class="unclickabledivsvg">
      <object id="chalkboardsvg" class="objectsvg" data="blackboard-backgrounds-wallpapers.jpg" type="image"></object>
    </div>

mais dès que la souris survole une de mes autres div, ça revient à la souris normale
2 - de la même façon, en activant un click sur tous mes objects, alors si je clique sur un point du fond "chalkboarddiv", j'ai bien mon alert, mais dès que la souris repasse sur une des autres div, c'est comme si elle cachait le fond et alors plus de click possible, je n'ai plus d'alert, je pensais pourtant qu'avec mon $("*") il y aurait une continuité de la gestion de l'évènement. Smiley sweatdrop
$("*").click(
function() {alert("coucou")}
);
Sujet clos
Aller à