lecture 8: handout

slide D: a basic rollover

This is the code used to produce the "button" on slide D.

<a href="#startcontent" onmouseover="document.button1.src='buttonimage1a.jpg'" onmouseout="document.button1.src='buttonimage1.jpg'">
<img src="buttonimage1.jpg" alt="Image: rollover demonstration" name="button1" />
</a>

Remember what it is basically saying: "When the mouse is over the element named button1 change its src (source) to buttonimage1a.jpg" (and a similar thing when the mouse moves back out).

slide G: opening new windows and controlling their size

Here is the code for the two links on slide G. Remember that with long objects like this, you must type the code without line breaks, as one long string of characters. If the text editor breaks it, that's OK, but you must not enter a line break yourself (i.e., don't press the Return or Enter key).

<a href="#startcontent" onClick="window.open('colombia.html','','width=600,
height=400,left=100,screenX=100,top=100,screenY=100')">Some facts about Colombia</a> <a href="#startcontent" onClick="window.open('ecuador.html','','width=500,
height=500,left=300,screenX=300,top=100,screenY=100')">Some facts about Ecuador</a>

slide H: a simple "greeting" JavaScript

The following code is in the document header of slide H:

<script type="text/javascript"><!--

function yourname(whatname) { alert ("Hello, "+whatname+"!") }

--></script>

And this is what actually renders the form element:

<form action="">
  <input name="Textbox" type="text" />
  <input name="submit" type="button" value="What's your name?"
    onclick="yourname(form.Textbox.value)" />
</form>

Have a look at the online teaching materials for more detail on what all the various bits of this code do.

slide K: preloading

This code is in the document header of slide K:

<script type="text/javascript">
<!--
no1 = new Image(190, 206);
no1.src = "jupiter.jpg";
no2 = new Image(190, 206);
no2.src = "jupiterpainted.jpg";
function changeimage (imgTagName,imgObj)
{
  if (document.images)
    {
       document.images[imgTagName].src = imgObj.src
    }
}
// -->
</script>

And this is the actual rollover:

<a href = "#"
 onmouseover = "changeimage('planet',no2)"
 onmouseout = "changeimage('planet',no1)">
<img name="planet" src="jupiter.jpg"
 width="190" height="206">
</a>