Clicking on an Image map, recording where clicked and automatically submitting the page

Question

Hi all ... this was a problem that was asked and solved for version 6.  We now want to use the code under version 7, but are having the devils own job getting it working.  This is what comes of knowing just enough of something to be dangerous :-)

I've pasted the code below.  Basically, it takes an image, records if the respondent clicked on the nominated grid reference or not, and then submits the page.  I got that SSI_subSubmitMe() (under version 6) is now SSI_SubmitMe() under version 7 but just changing that didn't work.  Is anyone able to help me out please?

<input name="P17tuna1_var" type="hidden">

<IMG SRC="[%GraphicsPath()%]YLC-TUNA-SHELF-2.jpg" width="900" height="600" border="0" usemap="#Map">

<MAP NAME="Map">


<!-- <AREA SHAPE="rect" COORDS="0,0,900,600" value="9" onClick="[our javascript function](this) -->

<AREA SHAPE="rect" COORDS="0,0,276,24" alt="0" onClick="store(this)">
<AREA SHAPE="rect" COORDS="277,0,587,24" alt="0" onClick="store(this)">
<AREA SHAPE="rect" COORDS="588,0,900,24" alt="0" onClick="store(this)">

<AREA SHAPE="rect" COORDS="0,25,276,275" alt="0" onClick="store(this)">
<AREA SHAPE="rect" COORDS="277,25,587,275" alt="1" onClick="store(this)">
<AREA SHAPE="rect" COORDS="588,25,900,275" alt="0" onClick="store(this)">

<AREA SHAPE="rect" COORDS="0,276,276,600" alt="0" onClick="store(this)">
<AREA SHAPE="rect" COORDS="277,276,587,600" alt="0" onClick="store(this)">
<AREA SHAPE="rect" COORDS="588,276,900,600" alt="0" onClick="store(this)">




</MAP>

<SCRIPT LANGUAGE="JavaScript">

<!--

var response = new Array();

response[0] = document.mainform.P17tuna1_var;

var clicked = 0;

function store(area) {

response[clicked].value = area.alt;

clicked++;

if(clicked == 1) {

SSI_SubmitMe();

}

}

//-->

</SCRIPT>

p.s. we're on 7.0.22.

Comments

This works perfect on IE, but does not seem to function at all on Firefox... Thank you for sending this code my way! I will see if I can't figure out a way to get it to work on both browsers.

---

using .innerHTML instead of .innerText works, but I don't know why the former does not update the screen in Firefox. (it does update the value as accessed by javascript, just not the display).

btw change the function name to mystore rather than store :)

---

Thank you again. I am still not getting functionality on Firefox, in regards to the text changing to indicate the choice. I am still using SSI 6.6.18, is this maybe causing my issues?

---

try the error console in firefox? (ctrl + shift + j ) and see if you get any errors there

---

Did you guys ever get this to work?  I am very interested in doing a heatmap question...

Answer 1

Hi Marion,

replace all occurrences of store with mystore. it refers to mootools store function instead of your own.

Comments

since I'm home, here it is:

<SCRIPT LANGUAGE="JavaScript">
    function mystore(area)
    {
        document.getElementById("myerror").innerText = area.alt;
        document.getElementById("Home2_RespSelect").value = area.alt;
    }
     
</SCRIPT>

---

Perfect!!! Thank you so much!

---

Can an image map be made into a select all, within the capabilities of a basic JS Free Format question? Or would doing something like that involve something more complex?

---

it can easily be done; just change its assigned function to something like

<SCRIPT LANGUAGE="JavaScript">
    function mystore(area)
    {
        document.getElementById("select_1").checked = true;
        document.getElementById("select_2").checked = true;
        document.getElementById("select_3").checked = true;
    }
      
</SCRIPT>

something like this, may need a few tweaks :)

---

Bahadir,

I am failing at implementing this multiple select script that you wrote above. I have things working peachy as a single select, but it always writes over the value in the data. Are the variables at the top for each of those "select_x" still hidden? How do I write those into the coordinates, or do I, so that when selected it shows in the data as having had been selected?