[jQuery] using click event on a map to update page
I am designing a map, such that different values in a table on the
page update when I click on different areas of the map. As you can see
the map is also inside the table although of course I could move it
out if necessary. My html runs like this:
--------------------------------------------------------------------------------------
<map name="troublesomemap">
<area class="class1" shape="polygon" coords=" ">
<area class="class2" shape="polygon" coords=" ">
<area class="class3" shape="polygon" coords=" ">
</map>
<table><tr>
<td class="col-1">
<img src="mymap.jpg" usemap="#troublesomemap" />
</td>
<td class="col-2">
Some Html Statement
</td></tr></table>
-----------------------------------------------------------
I have been trying to use jQuery to fill in the table
-----------------------------------------------------
$(".class1").click(function () {
$(".col-1").html(" <img src="mymapupdated.jpg"
usemap="#troublesomemap" /> ");
$(".col-2").html(" A changed Html statement
");
});
---------------------------------------------------------
to no avail. Can I only access children elements inside the click
function? I have tried various combinations of this,parents and filter
to no avail.
ps Another question for when I get that far - will the line
$(".col-1").html(" <img src="mymapupdated.jpg"
usemap="#troublesomemap" /> ");
choke under all them quotation marks? Do I use escapes? (Or I could
probably bundle it into some file and use the load command)
I is a definite jQuery nuby (all of 24 hours, in fact) but I likes
what I sees. Thank you.
Shane