Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

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

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)">




var response = new Array();

response[0] = document.mainform.P17tuna1_var;

var clicked = 0;

function store(area) {

response[clicked].value = area.alt;


if(clicked == 1) {






p.s. we're on 7.0.22.
asked Dec 2, 2011 by Marion Silver (5,220 points)
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...

1 Answer

+1 vote
Best answer
Hi Marion,

replace all occurrences of store with mystore. it refers to mootools store function instead of your own.
answered Dec 8, 2011 by Bahadir Ozkurt Gold (16,980 points)
since I'm home, here it is:
    function mystore(area)
        document.getElementById("myerror").innerText = area.alt;
        document.getElementById("Home2_RespSelect").value = area.alt;
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
    function mystore(area)
        document.getElementById("select_1").checked = true;
        document.getElementById("select_2").checked = true;
        document.getElementById("select_3").checked = true;

something like this, may need a few tweaks :)

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?