[jQuery] Re: Event Normalization Question

[Andy Matthews]

Since each of those area tags has it's own unique set of data, you'd
probably need to assign some unique identifier to it. Take just one,

<area id="US-MI-42" shape="poly" coords="566,68, 569,72" href="#">

by adding an id to it, you could do this:

$('area').each(function(){
        // a shortcut variable
        var $thisArea = $(this);
        $thisArea.hover(function(){
                // gets the coordinates of the currently hovered over area
tag
                var coords = $thisArea.attr('coords');
                // pulls the value of id and splits it into an array
                var params = $thisArea.attr('id').split('-');
                // runs the method call
                pollGetRegionResults(params[2],params[0],params[1],this,
event);
        },function(){
                // do nothing
        });
});

This is obviously untested but it should work fine.


-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of [EMAIL PROTECTED]
Sent: Thursday, September 20, 2007 2:11 AM
To: jQuery (English)
Subject: [jQuery] Event Normalization Question


I just started using jQuery a week or so (it's great) and am currently in
the process of converting ~2000 lines of my js to use jQuery methods. My
question is that I know one of the points of jQuery is to assign events when
the DOM loads, not in the elements themselves, but what would you do in this
situation:

<area shape="poly" onmouseover="pollGetRegionResults(42, 'US', 'MI', this,
event);" coords="566,68, 569,72" href="#"> <area shape="poly"
onmouseover="pollGetRegionResults(42, 'US', 'ND', this, event);"
coords="478,48, 483,74" href="#"> <area shape="poly"
onmouseover="pollGetRegionResults(42, 'US', 'SD', this, event);"
coords="484,93, 488,142" href="#"> <area shape="poly"
onmouseover="pollGetRegionResults(42, 'US', 'NV', this, event);"
coords="309,136, 299,221" href="#">

...

The above is a piece of an image map where you can hover over a state to see
the poll results for that state. From my understanding of jQuery, in
addition to the above <area> declaration, I'd need to to something like the
following for each <area> if I wanted normalized
events:

$('area')[0].hover(function() {}, function() {});
$('area')[1].hover(function() {}, function() {});

...

I'd stick to doing it in the tags as above but I like using jQuery's
normalized events. Is there a better way?

Thanks,
Eric