Are there any other methods to make parts of an image clickable in a more organized way, aside from using the coordinates method or directly embedding images from Photoshop?
<script>
new el_teacher = ["candice","john"];
$(".teacher1").mouseenter(function(){
$(#textbox").show(el_teacher[0]);
});
$(".teacher2").mouseenter(function(){
$(#textbox").show(el_teacher[1]);
});
$("*").mouseleave(function(){
$(#textbox").hide();
});
</script>
<img src="ok.jpg" usemap="#image1">
<map name="image1">
<area shape="poly" coords="123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13" class="teacher1">
<area shape="poly" coords="13,41,141,455,677,13,213,313,133,99,555,99,333,222,211,105,13,123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13" class="teacher2">
<!-- Sorry i do not have my codes with me right now but this is roughly the senario. -->
<!-- @jycr753 i want the user to change the position of the click and the image also. -->
<!-- I am looking for jquery or javascript that can eliminate or shorten the coordinates so that the user can edit the information themselves easily -->