Search code examples
javascripthtmlformsimagemap

imagemap area with javascript referencing a form value

I'm trying to create an image map that acts as an up/down incrementer/decrementer control. The image is a simple 16x16 png file with two triangles (one pointing up, the other pointing down) with the top half of the image for UP (increment) and the lower half for DOWN (decrement).

The code below illustrates the trouble I'm having with the href of the imagemap area that references the form value. I am puzzled why the call to the alert function works whilst the code that uses the form value for the actual incrementing/decrementing is failing. The actual code I intend to implement will have more complexity but I need to get past this roadblock or change approach before going deeper.

So, I'm wondering whether this approach is indeed possible and if there's perhaps just something small missing from my scenario, or if perhaps this is a misguided attempt at doing something that would be better accomplished in another manner. I'll also confess my relative newbie status when it comes to client-side programming (as if it were not obvious) and thank everyone in advance for their gentle and constructive guidance.

<html>
 <head>
  <title>ImageMap Test</title>
 </head>
 <body>
  <form>
   <fieldset>
    <legend>ImageMap area href for javascript works for alerts:</legend>
    <input type='text' name='foo1_filter' size='25' value='123' />
    <img src='../img/arrow_up-down.png' title='Up-Down' usemap='#foo1' />
    <map name='foo1'>
     <area shape='rect' coords='0,0,15,7' href='javascript:alert("UP");' />
     <area shape='rect' coords='8,0,15,15' href='javascript:alert("DOWN");' />
    </map>
   </fieldset>
  </form>
  <p />
  <form>
   <fieldset>
    <legend>ImageMap area href for javascript does not work when referencing form values:</legend>
    <input type='text' name='foo2_filter' size='25' value='123' />
    <img src='../img/arrow_up-down.png' title='Up-Down' usemap='#foo2' />
    <map name='foo2'>
     <area shape='rect' coords='0,0,15,7' href='javascript:this.form.foo2_filter.value++;' />
     <area shape='rect' coords='8,0,15,15' href='javascript:this.form.foo2_filter.value--;' />
    </map>
   </fieldset>
  </form>
 </body>
</html>
Solution

  • I think the error is in the use of this.form within an area element. The .form attribute can be used only when clicking/using form elements, like inputs, fields, etc. Try doing the following:

    1. Add a name to the form, e.g.: my_form
    2. Change the "this.form" to "document.my_form"

    Something like

    <form name="my_form">
  <fieldset>
    <legend>ImageMap area href for javascript does not work when referencing form values:</legend>
    <input type='text' name='foo2_filter' size='25' value='123' />
    <img src='../img/arrow_up-down.png' title='Up-Down' usemap='#foo2' />
    <map name='foo2'>
      <area shape='rect' coords='0,0,15,7' href='javascript:document.my_form.foo2_filter.value++;' />
      <area shape='rect' coords='8,0,15,15' href='javascript:document.my_form.foo2_filter.value--;' />
    </map>
  </fieldset>
</form>

    Regards