This is a customized version of ImgMap interface. Pls. note, other html element were omitted for brevity..
<%= form_tag( {:controller => 'window', :action => 'setmap'}, {:id => 'img_area_form'} ) -%>
<fieldset>
<legend>
<a onclick="toggleFieldset(this.parentNode.parentNode)">Image map areas</a>
</legend>
<div style="border-bottom: solid 1px #efefef">
<div id="button_container">
<!-- buttons come here -->
<img src="javascripts/imgmap/images/add.gif" onclick="myimgmap.addNewArea();toggle_sample_href();" alt="Add new area" title="Add new area"/>
<img src="javascripts/imgmap/images/delete.gif" onclick="myimgmap.removeArea(myimgmap.currentid);toggle_sample_href();" alt="Delete selected area" title="Delete selected area"/>
<img src="javascripts/imgmap/images/zoom.gif" style="display: none;" id="i_preview" onclick="myimgmap.togglePreview();" alt="Preview image map" title="Preview image map"/>
<table id="sample_href" style="display: inline; margin-left: 100px; display: none;">
<tr>
<td style="font-size: 80%;">example: http://www.site.com/register.html</td>
</tr>
</table>
</div>
</div>
<div id="form_container" style="clear: both;">
<!-- form elements come here -->
</div>
</fieldset>
<!--////// Image //////-->
<fieldset>
<legend>
<a onclick="toggleFieldset(this.parentNode.parentNode)">Image</a>
</legend>
<div id="pic_container">
</div>
</fieldset>
<input type="button" value="Save" onclick="javascript:showPreview();" />
</form>
<script type="text/javascript" src="javascripts/imgmap/js/imgmap.js"></script>
<script type="text/javascript" src="javascripts/imgmap/js/default_interface.js"></script>
When the user clicks the + icon, various forms (including Href field) will be generated inside <div id="form_container" /> , he can draw map on the image, once the mouse has been release associated Href field should be focus(); see snippets from imgmap.js
//Codes here...
/**
* EVENT HANDLER: Handles mousedown on the image.
* Handles beggining or end of draw, or polygon/bezier point set.
* @param e The event object.
*/
imgmap.prototype.img_mousedown = function(e) {
//Emphasize only this area for brevity.
if (this.areas[this.currentid] == this._getLastArea()) {
//editor mode adds next area automatically
//if (this.config.mode != "editor2") {this.addNewArea();}
/*//////////////////////////////////////////////////////
this the code that triggers focus();
//////////////////////////////////////////////////////*/
if (this.config.mode != "editor2") {
$$('#img_area_'+this.currentid.toString()+' .img_href').first().focus();
alert('Click here.');
}
return;
}
return;
}
};
//Codes here..