[Back to

 previous page] [Next Page

 in Series]

Ken Ward's Java Script Tutorial ...

Combobox and Image Map

funnyManCol.jpg (32285 Byte)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.

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...

 

And for some programming for your brain: check out New Life Course