Value Added | daily

Class Schedule

Basics | sessions 01-03
  1. 19 Jan intro and clients | lecture | labs
  2. 26 Jan servers and command line | lecture | labs
  3. 02 Feb networks and protocols | lecture | labs
Web Development | sessions 04-08

  1. 09 Feb structural layer | lecture | labs
  2. 16 Feb presentational layer | lecture | labs
  3. 23 Feb using a structure | lecture | labs
  4. 02 Mar behavioral layer | lecture | labs
  5. 09 Mar design thoughts | lecture | labs
Dealing with Markup | sessions 09-10
  1. 16 Mar control objects and display | lecture | labs
  2. 23 Mar tools that read markup | lecture | labs
Working with data | sessions 11-14
  1. 30 Mar formulas, functions, vectors | lecture | labs
  2. 06 Apr data display | lecture | labs
  3. 13 Apr manipulate data sets | lecture | labs
  4. 20 Apr relational data bases | lecture | labs
Presentations | sessions 15-16
  1. 27 Apr designing a presentation | lecture | labs
  2. 04 May delivering a presentation | lecture | labs


A second example of the same thing, with different images

Remember

UNIX/LINUX ⇒ command argument value
HTML ⇒ tag attribute value
CSS ⇒ selector declaration property declaration value
JavaScript ⇒ script type text/javascript

followed by the script components

Practice with these examples

One of the best tools to use is the W3Schools Javascript tutorials online. Let's try a few.

back to top

MouseOver an image

Look at this MouseOver Image example, noting the code and the script components, the inline CSS for body background, and the linking of the alternating image to an absolute location.

<html>
  <head>
    <script type="text/javascript">
        <!--
        // preload two images - they must be the same size!
        // Note here the image is 228 pixels wide and 184 pixels high.
        var normalButton = new Image(228,184);
        var reverseButton = new Image(228,184);
        normalButton.src = "images/unc_duke.jpg";
        reverseButton.src = "images/UNC_athleticsLOGO.jpg";
        // -->
   
</script>
  </head>
  <body bgcolor="gray">
    <h2>MouseOver on an Image</h2>
    <p>
        This page illustrates using the <em>mouseOver</em> on an image.
        As you drag the mouse over the image, notice how the image changes.
    </p>
    <p>
        <a href="https://www.unc.edu/"
            onMouseOver="document.ThisImg.src = reverseButton.src; return true"
    onMouseOut="document.ThisImg.src = normalButton.src; return true">
            <img name="ThisImg" src="images/unc_duke.jpg" />
        </a>
        The second replaces the initial one.
    </p>
  </body>
</html>

Try to modify this code for your own use. You may use any pair of images, but you must store them in the same subdirectory where you store your page code [so the script can find them in order to display them]. Here are two you can download for use.

[a one letter symbol] [a better two letter symbol]

These two images are the same size, but you may need to take a look at other images in an image editing software program to determine the size of the image. You will need to use these in order to change the size attributes for the images in the script.

MouseOver on an Image

This page illustrates using the mouseOver on an image. As you drag the mouse over the image, notice how the image changes.

The second replaces the initial one.

back to top

Acknowledgements/Further Reference

There are many, many scripting books on the market right now, more than 100 on JavaScript alone. The example here was modified from an old book, JavaScript Bible by Danny Goodman.

There are many places on the web where you can find free JavaScripts to use, but one of them most useful is Dynamic Drive.

back to top

Keep working on task 02.03

back to top