20 Sep 2018
Class Schedule
21 Aug | intro
23 Aug | clients
28 Aug | servers
30 Aug | networks
04 Sep | basics lab
06 Sep | structural layer
11 Sep | presentational layer
18 Sep | working with layers
20 Sep | behavior layer |
client side scripts |
DHTML practice |
next session
25 Sep | images & design
27 Sep | website lab
02 Oct | object layers
04 Oct | tools that read markup
09 Oct | document markup lab
11 Oct | spreadsheets, formulas & functions
16 Oct | data display
18 Oct | Fall Break
23 Oct | database tools
25 Oct | spreadsheets lab
30 Oct | relational databases
01 Nov | tables
06 Nov | relationships
08 Nov | input & output
13 Nov | SQL
15 Nov | complex queries
20 Nov | databases lab
22 Nov | Thanksgiving
27 Nov | presentation design
29 Nov | presentation delivery
04 Dec | presentation lab
13 Dec | 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
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
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.
![[right profile of German actor Wolfgang Stumph]](images/stumpf.RtProfile.png)
![[left profile of German actor Wolfgang Stumph]](images/stumpf.LtProfile.png)
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.