Détection si la position de la souris est dans un ensemble de règles de position?

Question

J'ai quelques objets JavaScript tels que ce (il est donc psuedo savoir si la syntaxe est erronée):

[{ "divid":"1","x1":"35","y1":"100","height":"150","width":"150" }, 
{ "divid":"2","x1":"45","y1":"110","height":"150","width":"150" }, 
{ "divid":"3","x1":"55","y1":"120","height":"150","width":"150" }, 
{ "divid":"4","x1":"65","y1":"130","height":"150","width":"150" }] 

Et Je détecte curruently position de la souris avec jQuery qui est bien, mais ...

Je veux détecter quand je suis sur l'une de ces positions retourner automatiquement la première ou plusieurs colonnes de cet ensemble JavaScript presque comme si je l'interroge si la position est entre l'une de ces retourner la liste des colonnes.

Je ne peux pas imaginer que je devrais faire un .each() sur chacun d'eux chaque fois que la position de la souris change? Peut-être que je le ferais ...

Si quelqu'un a déjà fait quelque chose comme ça, veuillez me diriger dans la bonne direction.

Merci -Josh

Answer 1

Un moyen facile de faire cela pourrait être à la position absolue des créées dynamiquement et divs attribuer un événement mouseOver pour eux. Ils devraient avoir un indice z élevé, être invisibles et flotter au-dessus des autres contenus.

Answer 2

Vous pourriez obtenir le offSet de votre mousse, selon le paradigme choisi, dites votre div parent, puis comparez les valeurs de retour à celle que vous obtenez de votre json!

getposOffset:function(what, offsettype){ 
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; 
    var parentEl=what.offsetParent; 
    while (parentEl!=null){ 
     totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; 
     parentEl=parentEl.offsetParent; 
    } 
    return totaloffset; 

si cela correspond, alors déclencher l'événement qui montre ce dont vous avez besoin!

Answer 3

Je ne sais pas si cette idée fonctionnera pour ce que vous voulez, mais je l'ai fait un peu penser hors des sentiers battus ...

Comment l'utilisation d'une carte d'image? : P

Il nécessite un codage et un traitement minimal et cela fonctionne! J'ai superposé une image mappée et ajouté des événements de survol sur les zones. J'ai posté un demo here - ce n'est pas parfait, mais plutôt une preuve de concept.