use javscript to trigger onclick event on image in jQuery zoommap

I am using http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps for an interactive map. I added a legend. One icon on the legend should trigger a clickable region on the map and thereby cause the map to zoom in. How can I create such an oncllick event to make the browser click that zoomable region? Will some CSS do or do I need JavaScript?
rhandalthorAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Justin MathewsCommented:
If the zoomable region has an ID 'zoomrgn', you can add this jQuery code:

$('#zoomrgn').click();

to invoke a click on that region.

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rhandalthorAuthor Commented:
@ jmatix How would I add that code to divs - one for each legend icon or an image (legend image?
0
rhandalthorAuthor Commented:
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

rhandalthorAuthor Commented:
I guess I would have to load something like
$('#other').click(function() {
  $('#target').click();
});

Open in new window

0
Justin MathewsCommented:
If all <img>s have a common class, say, legend i.e. <img class='legend'>

Then you can say:

$('.legend').click(function() {
  $('#target').click();
});

It will apply it for all images.
0
rhandalthorAuthor Commented:
Loaded
 $('#destinations-legend').click(function() {
  $('#kadavu').click();
});

Open in new window

Just to make the whole legend image a trigger. Reloaded the page. No luck yet and an error:
$ is not defined
http://abc.com
Line 1

Open in new window

0
Justin MathewsCommented:
Have you included jquery.js at the top as:

<script src="http://code.jquery.com/jquery-latest.js"></script>

0
rhandalthorAuthor Commented:
WordPress normally loads jQuery on the home page and all pages unless blocked and it is loaded on that page. I checked using Firebug. Maybe the legend.js is loaded too late or too early to work with jQuery?
0
rhandalthorAuthor Commented:
Read http://wpengineer.com/2028/small-tips-using-wordpress-and-jquery/ and tried
]jQuery(function ($) {
// Now you can use $ as a reference to jQuery without any problem
$('#destinations-legend').click(function() {
$('#kadavu').click();
 });
}); 

Open in new window

in legend.js which I load using
wp_enqueue_script('legend', '/wp-content/themes/decondo-child/lib/scripts/legend.js');

Open in new window


No luck yet :-(
0
dxdinhCommented:
do you url to page that I can take a look at the error messages?
0
rhandalthorAuthor Commented:
Site is not open to the public yet. I see this error:
$ is not defined
http://abc.com
Line 1

Open in new window


when I use this
$('#destinations-legend').click(function() {
$('#kadavu').click();
}); 

Open in new window

When I check other script loaded i DO see jQuery JavaScript Library v1.4.2 . legend.js is loaded before jQuery in the header.
in legend.js
0
Justin MathewsCommented:
Can you move loading of legend.js down to be below jquery.js so that it loads after jquery.js?
0
rhandalthorAuthor Commented:
Trying to figure out how to do that with the WordPress'
wp_enqueue_script('legend', '/wp-content/themes/decondo-child/lib/scripts/legend.js');

Open in new window

in function.php. Never done that before..
0
rhandalthorAuthor Commented:
wp_enqueue_script('legend', '/wp-content/themes/decondo-child/lib/scripts/legend.js','jquery');

Open in new window


was supposed to load the script and make it clear to WordPress that it depends on jQuery, but I still get
jQuery is not defined
http:/abc.coms?ver=3.0.1
Line 1

Open in new window

using
jQuery(document).ready(function ($) {
$('#destinations-legend').click(function() {
$('#kadavu').click();
});
});

Open in new window

0
rhandalthorAuthor Commented:
OK. Working. Had to load it before wp_head() in the parent theme :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.