Overlap images sur clic

J'essaie de créer une place le jeu de balle. Où l'utilisateur peut cliquer sur une image pour montrer où ils pensent que la balle est. Je l'ai fonctionné, mais si vous voulez cliquer sur deux points qui sont relativement proches l'un de l'autre, vous ne pouvez pas choisir l'image précédente.Overlap images sur clic

Y at-il un moyen d'y parvenir, je pensais à mettre une image transparente au-dessus d'eux afin qu'ils ne soient pas sélectionnables mais je ne peux pas le faire fonctionner.

C'est ce que j'ai jusqu'à présent

http://enjoythespace.com/sites/game/

Source

2010-11-28 Josh Crowder

Il pourrait être une bonne chose à ne pas les laisser choisir les si elles sont trop proches. Si vous facturez de l'argent pour chaque clic, je ne peux pas imaginer que quelqu'un choisisse intentionnellement deux points qui ne sont qu'à quelques pixels l'un de l'autre.

Cependant, il peut être possible de placer une div transparente sur l'image et de placer les images en-dessous. Cela a fonctionné pour moi ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body> 
    <div id="divSource" style="position:relative;width:500px;"> 
     <img src="http://chelseavets.org.uk/Gallery/090228vBBC/SpotTheBall.JPG" width="100%" /> 
     <div id="divTarget" style="position:absolute;left:0;top:0;width:100%;height:100%;border:solid 1px red;z-index:100;"></div> 
    </div> 
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#divTarget').click(function (e) { 
      var target = $('<div></div>'); 
      target.css({ 
       position: 'absolute', 
       backgroundImage: 'url(http://enjoythespace.com/sites/game/img/cross.png)', 
       width: '29px', 
       height: '27px', 
       top: e.offsetY - 14 + 'px', 
       left: e.offsetX - 15 + 'px', 
       padding: 0, 
       margin: 0, 
       zIndex: 50 
      }); 
      $('#divSource').append(target); 
     }); 
    }); 
</script> 
</body> 
</html>

Source

2010-11-28 04:22:54 Brian

Overlap images sur clic

Répondre

Questions connexes