Question

I have an image area:

<img class="projmap" src="images/proj.png" width="628" height="245" alt="" usemap="#projmap" />
<map id="projmap" name="projmap">
<area shape="poly" alt="1" title="some1" coords="59,45,118,61,141,52,133,38,128,35,164,17,171,43,214,31,240,99,192,148,193,157,212,156,212,221,140,228,100,222,77,226,60,226,58,218,58,197,72,187,74,159,42,159,36,150,68,109,56,108,55,108" id="house1" href="#dialog-modal" />
<area shape="poly" alt="2" title="some2" coords="241,96,402,85,413,148,416,153,401,152,403,213,418,219,418,228,395,227,387,234,369,234,359,231,354,238,342,239,342,229,304,227,298,236,287,232,286,224,239,224,212,224,210,161,207,151,189,151,240,96" href="#dialog-modal" id="house3" />
<area shape="poly" alt="3" title="some3" coords="409,103,494,53,592,121,574,128,573,158,576,175,570,182,582,210,528,223,434,222,430,213,414,213,403,208,405,172,405,152,416,152,407,103" id="house2" href="#dialog-modal" />
</map>

And want to get an alt attr on click. Tryed this:

$('#house1').fancybox({
        'scrolling'     : 'no',
        'padding'       : 0,
        'autoScale'     : false,
        'titleShow'     : false,
        'onComplete'    : function() {
            var cat = $("area").attr("alt");
            FillCats(cat);
        }
    });

but attr doesn’t catched.

Answer 1

this will work:

var sel = 0;

[...]

$('area').click(function(e) {
    sel = $(this).attr('alt');
});

sel will contains the last area clicked.