Web Development - Event Handling

Event Handling

Find two images and experiment using MouseOver and MouseOut events associated with a href link. You can use the following code to get simple animation when the mouse pointer is located over the link.

eyesright.gif

eyesleft.gif

You can download images from your browser by clicking on the image with the right mouse button and choosing save from the pull down menu.

 <?xml version="1.0" encoding="UTF-8"?> 
 <!DOCTYPE html 
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>WEB Development Question 1</title>
   
   <script>
   
   var eyesLeft = new Image(24,13);
       eyesLeft.src = "eyesleft.gif";

   var eyesRight = new Image(24,13);
       eyesRight.src = "eyesright.gif";

   </script>

</head>

<body bgcolor="#FFFFFF">

  <img src="eyesleft.gif" name="image1" width="24" height="13" />
          
  <a href="some URL" 
      onMouseOver="image1.src = eyesRight.src"
      onMouseOut ="image1.src = eyesLeft.src"> 
link description</a>
</body>
</html>

Question 2.

Click on the buttons to change the traffic signal.

Your task is to create three buttons to control a traffic signal using the coloured images shown below.

The traffic light could be constructed using a table with 3 rows and one column. Each cell in the table can then contain a named image that is initially set to display the black circle.

Label the three buttons: stop, caution and go.

You are not required to do provide the flashing option.

<script>
      var redLightImage    = new Image(76,76);
      var greenLightImage  = new Image(76,76);   
      var yellowLightImage = ????;   //replace ???? with your code 

      var blackImage       = ????;
         
      redLightImage.src    = "redcircle.gif";   
      yellowLightImage.src = "yellowcircle.gif";   
      greenLightImage.src  = "greencircle.gif";   
      blackImage.src       = "blackcircle.gif";   

      function stop(){     
         document.topImage.src = redLightImage.src;
         document.middleImage.src = blackImage.src;
         document.bottomImage.src = blackImage.src;      
      }

      function caution(){     
        -
        -  you can write the code that goes here
        -
      }

      function go(){     
        -
        -  you can write the code that goes here
        -
      }

</script> 


<img src="blackcircle.gif" width="76" height="76" name="topImage" />
<img src="blackcircle.gif" width="76" height="76" name="middleImage" />
<img src="blackcircle.gif" width="76" height="76" name="bottomImage" />

<form name="trafficLightForm">

   <input type="button" value="Go" onclick = "go()" />
   <input type="button" value="Caution" onclick = "caution()" />  
   <input type="button" value="Stop"    onclick = "stop()" />  

</form>

Notice that the code defined within a function is not acted upon until the function is invoked by the user clicking on a button.

For the adventurous, you can write a flash function that cycles through each colour using the setInterval() method of window.

Event Handling

Question 1.

Question 2.