Ken Ward's Java Script Tutorial ...

Combobox and Image Map

Now children, you notice the funny man on the left. No it isn't a self portrait! Well, perhaps it is a little like me, but you shouldn't judge people from their appearances.

So notice the, well me then, on the left and pick a name of clothing from the drop down menu below and then click on the funny man. For instance, if you choose hat from the drop-down menu, click where you think the "hat" is on the funny man.

Pick an item hat jacket shirt trousers socks shoes gloves

The first thing you need to do is to make an image map. I used Frontpage editor for this. When it asked me for the url, I typed:

javascript:checkAnswer('shoes')

Instead of opening a link, it will now run the javascript function "checkAnswers".

 

 

 

 

 

Here is the function:

<script type="text/javascript">

<!--//

function checkAnswer(myAns) {

//first get the select with an id of s1

mySelect=document.getElementById("s1");

//then get the item selected in the combobox

mySelectedItem=mySelect.options[mySelect.selectedIndex].value;

//if no item has been selected (or no item of clothing) then

//open an alert

if (mySelectedItem=='none')

{alert('Please select an item');

}

else

{

//if an item has been selected then check whether it is the right one

if (mySelectedItem==myAns)

alert('Excellent! You correctly clicked on: '+myAns)

else

//or say if it isn't the right item

alert('No, you didn\'t click on: '+mySelectedItem);

}

}//end of checkAnswer(myAns)

//-->

</script>

The form with the drop-down menu is written like this:

<form name="f1" id="" method="post" action="" enctype="text/plain">

<select name="s1" id="s1">

<!--note that the first item is given the value of "none"-->

<option value="none" selected="selected">Pick an item</option>

<option value="hat">hat</option>

<option value="jacket">jacket</option>

<option value="shirt">shirt</option>

<option value="trousers">trousers</option>

<option value="socks">socks</option>

<option value="shoes">shoes</option>

<option value="gloves">gloves</option>

</select>

</form>

 

 

---

Ken Ward's HTML Guide...