Question

I’m using a plugin called jQuery image map emulator which takes parameters like so:

$('#example').imagemap([
{
    top_x: 0,
    top_y: 0,
    bottom_x: 75,
    bottom_y:65,
    callback: alertCallback}
])

with multiple arrays possible:

$('#example').imagemap([
// One image map
{top_x: 0,top_y: 0,bottom_x: 75,bottom_y:65,callback: alertCallback},

// Another image map
{top_x: 150,top_y: 105,bottom_x: 265,bottom_y:170,callback: alertCallback}
]);

How would I go about dynamically adding more of of the parameters as necessary? Ideally I’d have one image map “set” and be able to add more as needed with new coordinates.
Thanks!

Answer 1

The options passed into JQuery are just plain javascript objects, so you can define properties on them using the method you’ve specified above, or just by treating them like a key-value dictionary.

The following is equivalent to your first example:

var options = new Array();
options[0] = new Object();
options[0]["top_x"] = 0;
options[0]["top_y"] = 0;
options[0]["bottom_x"] = 75;
options[0]["bottom_y"] = 65;
options[0]["callback"] = alertCallback;

$('#example').imagemap(options);

If you want to add new parameters, consider keeping the options variable at a page-level scope, and recalling imagemap with the new parameters whenever they change.