Detecting if mouse position is within a set of position rules?

Question

I have some JavaScript objects such as this (it's psuedo so I know if syntax is wrong):

[{ "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" }]

And I'm curruently detecting mouse position with jQuery which is fine but...

I want to detect when I'm over one of those positions automatically return back the first or multiple columns of that JavaScript set almost like I'm querying it if the position is between one of those return the set list of columns.

I can't imagine I would have to do an .each() over all of them everytime the mouse position changes? Maybe I would...

If anyone has done something like this before please point me in the right direction.

Thanks -Josh

Answer 1

An easy way to do this might be to absolute position some dynamically created divs and assign a mouseOver event to them. They'd have to have high z-index, be invisible, and floated above other content.

Answer 2

You could get the offSet of you mousse, depending of the chosen paradigm, say your parent div, then compare the return values to the one you get from your 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;

if it matches then fire the event that shows what you need!

Answer 3

Hi! I don't know if this idea will work for what you want, but I did a little thinking outside the box...

How about using an image map? :P

It requires minimal coding and processing and it works! I overlaid a mapped image and added hover events on the areas. I posted a demo here - it's not perfect, but more of a proof of concept.