More Rollover Examples

Two Images

Here are two images we will use:

cs111.gif cs251.png
CS111 logo CS251 logo

Examples

1 CS111 logo
<IMG SRC = "cs111.gif"
 ALT = "CS111 logo"
 onMouseOver = "this.src = 'cs251.png';"
 onMouseOut  = "this.src = 'cs111.gif';">
2 CS111 logo
<IMG SRC = "cs111.gif"
 ALT = "CS111 logo"
 onMouseDown = "this.src = 'cs251.png';"
 onMouseUp  = "this.src = 'cs111.gif';">
3 CS111 logo
<IMG SRC = "cs111.gif"
 ALT = "CS111 logo"
 onClick = "this.src = 'cs251.png';"
 onDblClick  = "this.src = 'cs111.gif';">
4 CS111 logo
<IMG SRC = "cs111.gif"
 ALT = "CS111 logo"
 onClick = "if (this.src == 
                 'http://cs.wellesley.edu/~cs110/lectures/JSevents/cs111.gif') {
              this.src = 'cs251.png';
            } else {
              this.src = 'cs111.gif';
            }">
<!-- It's OK to split an HTML string over multiple lines,
     but not OK to split a JavaScript string over multiple lines -->
5 CS111 logo
<SCRIPT TYPE="text/JavaScript">
  var pic111 = true;
</SCRIPT>
<IMG SRC = "cs111.gif"
 ALT = "CS111 logo"
 onClick = "if (pic111) {
              this.src = 'cs251.png';
            } else {
              this.src = 'cs111.gif';
            }
            pic111 = !pic111;">
<!-- It's OK to split an HTML string over multiple lines,
     but not OK to split a JavaScript string over multiple lines -->