Question

I have make a image map and have a form. In the form i have three text fields. When i click on the image map. I click on the number 4. The number 4 must come in the text field “regio”.

A other example. When i click in the image map on the number 9. The number 9 must come in the textfield “regio”.

Here is my code: http://www.testdomeinnaam.nl/mike/

But how can i make this????
Thank you !!!

Answer 1

Three things:

1 – for every area you need to attach a firing event.
Way one:

<area ... href="JavaScript: regionMap(6); void(0);" >

Way two:

<area ... onclick="regionMap(6); return false;">

Way three:

<script>
   jQuery("#imagemap area").click( function(){ 
        var s = jQuery(this).attr("alt");
        regionMap( s.substr(s.length - 2) );
   });
</script>

Note that this way takes the number of the region from the alt attribute – it’s not the best way.

In the first two ways – you have to void(0) or return false to let the browser know you already handle the event yourself, and that you don’t expect it to send the page away because of the user click.

2 – implement the regionMap methoid

Way one – pure JS

   function regionMap(region) {
      document.getElementById("regio").value = region;
   }

Way two – using jQuery

   function regionMap(region) {
      jQuery("#regio").val(region);
   }

3 – add the implementation to your page

Way one: embed in your html page code

<script>
   function regionMap(region) {
      document.getElementById("regio").value = region;
   }
</script>

Way two – use JS resource.
Create a file for example – regionsform.js, and in it :

   function regionMap(region) {
      document.getElementById("regio").value = region;
   }

And embed in your HTML a reference to it.
Assuming the HTML and the regions.js are in the same folder – it would look like

<script src="regionsform.js"></script>

Have fun & Good luck 🙂