meets Tuesday and Thursday from 0800-0915
office hours in Manning 112
Class Schedule
10 Jan | intro
15 Jan | clients
17 Jan | servers
22 Jan | networks
24 Jan | basics lab
29 Jan | structural layer
31 Jan | presentational layer
05 Feb | working with layers
07 Feb |
behavior layer; server-side scripts |
client side scripts |
DHTML practice |
next session
12 Feb | images & design
14 Feb | website lab
19 Feb | document markup
21 Feb | tools that read markup
26 Feb | document markup lab
28 Feb | spreadsheets
05 Mar | formulas & functions
07 Mar | data display
19 Mar | database tools
21 Mar | spreadsheets lab
26 Mar | relational databases
28 Mar | tables
02 Apr | relationships
04 Apr | input & output
09 Apr | SQL
11 Apr | complex queries
16 Apr | databases lab
18 Apr | presentation design
23 Apr | presentation delivery
25 Apr | presentation lab
30 Apr | 0800-1100 | final in class presentation
This work
is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
home & schedule | class blog | syllabus | contact | grades
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
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.
<html>
<head>
<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";
// -->
</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://en.wikipedia.org/wiki/Wolfgang_Stumph"
onMouseOver="document.ThisImg.src = reverseButton.src; return true"
onMouseOut="document.ThisImg.src = normalButton.src; return true">
<img name="ThisImg" src="stumpf.RtProfile.png" />
</a>
Wolfgang Stumph in right and left profile
</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.
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
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.