SILS iSchool

24 Sep 2018

Value Added | daily

Class Schedule

Basics | sessions 01-05

22 AUG | intro
27 AUG | clients
29 AUG | servers
05 Sep | networks
10 Sep | basics lab

Web Development | sessions 06-11

12 Sep | structural layer
17 Sep | presentational layer
19 Sep | working with layers

24 Sep | behavior layer | client side scripts | DHTML practice | next session

26 Sep | images & design
01 Oct | website lab

Document Markup | sessions 12-14

03 Oct | object layers
08 Oct | tools that read markup
10 Oct | document markup lab

Spreadsheets | sessions 15-19

15 Oct | spreadsheets
17 Oct | formulas & functions
22 Oct | data display
 18 Oct | Fall Break 
24 Oct | database tools
29 Oct | spreadsheets lab

Relational Database | sessions 20-26

31 Oct | relational databases
05 Nov | tables
07 Nov | relationships
12 Nov | input & output
14 Nov | SQL
19 Nov | complex queries
26 Nov | databases lab
 21 Nov | Thanksgiving 

Presentation | sessions 27-30

28 Nov | presentation design
03 Dec | presentation delivery
05 Dec | presentation lab
12 Dec | 0800-1100 | final in class presentation

Try out these examples on your own pages, just for practice


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

You can do the same kind of thing with images as well. 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.

    <script type="text/javascript">
        // preload two images - they must be the same size!
        // Note here the image is 151 pixels wide and 223 pixels high.
        var normalButton = new Image(151,223);
        var reverseButton = new Image(151,223);
        normalButton.src = "stumpf.RtProfile.png";
        reverseButton.src = "stumpf.LtProfile.png";
        // -->
  <body bgcolor="gray">
    <h2>MouseOver on an Image</h2>
        This page illustrates using the <em>mouseOver</em> on an image.
        As you drag the mouse over the image, notice how the image changes.
        <a href=""
            onMouseOver="document.ThisImg.src = reverseButton.src; return true"
    onMouseOut="document.ThisImg.src = normalButton.src; return true">
            <img name="ThisImg" src="stumpf.RtProfile.png" />
        Wolfgang Stumph in right and left profile

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.

[right profile of German actor Wolfgang Stumph] [left profile of German actor Wolfgang Stumph]

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.

Wolfgang Stumph in right and left profile

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