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




</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.
asked Dec 2, 2011 by Marion Silver (5,220 points)
is this still problem still a problem?
does version 7 work with document.mainform?
Hi Bahadir ... sorry for the late reply.

Yes, sadly, it is still a problem.
Hi Ryan ... I've used document.mainform quite successfully in version 7.
Do you have a dummy link we can look at?
I got this image map to work, but does anyone know a way to get the response option chosen to show on the page before advancing to the next page? I would prefer it not to advance automatically, and to have a text box that indicates the answer selected. Any ideas?
define your textbox with a unique ID and instead of calling SSI_SubmitMe() call something like
[code]function() {document.getElementById("mytextbox".value = area.alt;)}
Bahadir, thank you for the speedy reply. I am having some issues implementing this. I may be misunderstanding where I am to place the unique ID textbox name.

Here is my current code (Maps variable is Home2_area, and then Home2_NewVar for the text box) :

<input name="Home2_area" type="hidden">
 
<IMG SRC="[%GraphicsPath()%]alaska_areas.gif" width="540" height="456" border="0" usemap="#Map">
 
<MAP NAME="Map">
 
 
<!-- <AREA SHAPE="rect" COORDS="0,0,540,456" value="5" onClick="[our javascript function](this) -->
 
<AREA SHAPE="poly" COORDS="218,208,247,143,390,99,384,42,266,17,185,68,138,157,192,211" alt="Far North" onClick="mystore(this)"/>
<AREA SHAPE="poly" COORDS="220,207,402,185,390,98,249,145" alt="Interior" onClick="mystore(this)">
<AREA SHAPE="poly" COORDS="271,204,287,286,245,351,167,400,243,301,200,306,145,265,178,212,193,214" alt="Southwest" onClick="mystore(this)">
<AREA SHAPE="poly" COORDS="274,206,401,189,411,270,302,291,289,285" alt="Southcentral" onClick="mystore(this)">
<AREA SHAPE="poly" COORDS="413,258,432,255,455,282,473,264,539,349,535,384,515,388,413,272" alt="Inside Passage" onClick="mystore(this)">
 
</MAP>

<SCRIPT LANGUAGE="JavaScript">
 
<!--
 
var response = new Array();
 
response[0] = document.mainform.Home2_area;
 
var clicked = 0;
 
function mystore(area) {
 
response[clicked].value = area.alt;
 
clicked++;
 
if(clicked == 1) {
 
function() {document.getElementById(Home2_NewVar.value = area.alt;)};
 
}
 
}
 
//-->
 
</SCRIPT>

<input name="Home2_NewVar" type="text">
Here's the code that works as you like
the hidden variable is named Home2_SelectedArea
<input name="Home2_SelectedArea" id="Home2_SelectedArea" type="hidden">
<div name="myText" id="myerror">Initial Text</div>
<IMG SRC="[%GraphicsPath()%]Untitled.png" width="900" height="600" border="0" usemap="#Map">


<MAP NAME="Map">
<AREA SHAPE="rect" COORDS="0,0,276,24" alt="area1" onClick="mystore(this)">
<AREA SHAPE="rect" COORDS="277,0,587,24" alt="area2" onClick="mystore(this)">
<AREA SHAPE="rect" COORDS="588,0,900,24" alt="area3" onClick="mystore(this)">
<AREA SHAPE="rect" COORDS="0,25,276,275" alt="area4" onClick="mystore(this)">
<AREA SHAPE="rect" COORDS="277,25,587,275" alt="area5" onClick="mystore(this)">
<AREA SHAPE="rect" COORDS="588,25,900,275" alt="area6" onClick="mystore(this)">
<AREA SHAPE="rect" COORDS="0,276,276,600" alt="area7" onClick="mystore(this)">
<AREA SHAPE="rect" COORDS="277,276,587,600" alt="area8" onClick="mystore(this)">
<AREA SHAPE="rect" COORDS="588,276,900,600" alt="area9" onClick="mystore(this)">
</MAP>
 
<SCRIPT LANGUAGE="JavaScript">
    function mystore(area) 
    {
        document.getElementById("myerror").innerText = area.alt;
    }
 
</SCRIPT>


note that this does not SAVE the selected area when next is clicked, you need to add another hidden variable and set its value on Advanced/Javascript validation.
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:
<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?
...