Learn JavaScript Lesson 6 : Change Image

This is the Sixth article in our series on JavaScript. In this article we are going to expand on what we have already done in the previous article and rather than just show an alert when a categorical question is selected we will get each click to change an image. The first thing we need is the code from the last article. ( we have modified it so that we only have five  responses.

 
Click
  
 

TEMPLATE WORKING !!!



once we have the template file made up we need to create some metadata to go with it so.

Metadata(en-AU, Question, Label)
Q1 "Select an item"
    categorical [1..1]
    {
        A "A",
        B "B",
        C "C",
        D "D",
        E "E"
    };
End Metadata
Routing(Web)
Q1.LayoutTemplate = "Click.html"
Q1.Ask()
End Routing

Ok .. so when all that is working we need to add an image to our page to do this we will put an html table around the tag like so

in this example we are using the smileys that come with the ddl in the following directory

C:Program FilesSPSSIncPASWDataCollection5.6DDLScriptsInterviewFrequently Asked QuestionsImages

If you get your table code added into the template correctly you will end up with something like this.

Change Image
Change Image

The next thing we need to do is to create a function that will be called to change the image when we click. Type in the following code , under the existing Connect function

function ChangePic(iVal)
{
if  (iVal == 1)  {
 alert('A');
}
if  (iVal == 2)  {
 alert('B');
}
if  (iVal == 3)  {
 alert('C');
}
if  (iVal == 4)  {
 alert('D');
}
if  (iVal == 5)  {
 alert('E');
}
}

and then change our Connect function to call the ChangePic function passing in a value that we can use.

document.mrForm._Q0_C0.onclick = function() {ChangePic(1);}
document.mrForm._Q0_C1.onclick = function() {ChangePic(2);}
document.mrForm._Q0_C2.onclick = function() {ChangePic(3);}
document.mrForm._Q0_C3.onclick = function() {ChangePic(4);}
document.mrForm._Q0_C4.onclick = function() {ChangePic(5);}

at this stage all we have done is to move out the alert’s in the connect function and put them in the ChangePic function so what we should do next is find the code that we can use to change the source of the existing image. To do this we just locate the object with the document object like so.

document.mrForm.Smile.src = "??"

you will notice in our template that we gave the image tag a ID of smile, this way we can then get at the src property of the image. You may then just think that you could add the following to your function.

if  (iVal == 1)  {
 document.mrForm.Smile.src = "NewImageName.gif";
}
if  (iVal == 2)  {
 document.mrForm.Smile.src = "NewImageName.gif";
}
if  (iVal == 3)  {
 document.mrForm.Smile.src = "NewImageName.gif";
}
if  (iVal == 4)  {
 document.mrForm.Smile.src = "NewImageName.gif";
}
if  (iVal == 5)  {
 document.mrForm.Smile.src = "NewImageName.gif";
}

and you would be half right, but if you do this, the new images will not show. The way around this is to have the images already loaded into the template , but hidden, so add the following to your template ( making sure your images are hidden and they all have a different id) .

 
 
 
 
 

Now all we need to do is to use the .src property again to reference the hidden images. Change your ChangePic code to look like this.

function ChangePic(iVal)
{
if  (iVal == 1)  {
 document.mrForm.Smile.src = document.mrForm.x1.src;
}
if  (iVal == 2)  {
 document.mrForm.Smile.src = document.mrForm.x2.src;
}
if  (iVal == 3)  {
 document.mrForm.Smile.src = document.mrForm.x3.src;
}
if  (iVal == 4)  {
 document.mrForm.Smile.src = document.mrForm.x4.src;
}
if  (iVal == 5)  {
 document.mrForm.Smile.src = document.mrForm.x5.src;
}
}

And there you have it. When you click the categorical response the image changes. Once you understand all this code , you should be able to adapt it to perhaps make an image change when you are using a slider or when a numeric number is being changed. In our last article on javascript we will see how we can take what we already know and write something to countdown the number of characters on a text box as the user enters some text.

1 thought on “Learn JavaScript Lesson 6 : Change Image”

Leave a Comment

%d bloggers like this: