| UNIX/LINUX ⇒ | command | argument | value |
| HTML ⇒ | tag | attribute | value |
| CSS ⇒ | selector | declaration property | declaration value |
| JavaScript ⇒ | script | variable | value |
For instance, there is a date last updated Javascript in the navbar of every single page on the class website. View the source code and you will find it. It is between lines 209 and 246 on this page, and is in the same general area of the HTML for every page in this website.
You have a need to ensure the viewer knows the last time your page was updated, so this script can serve your purposes.
But there are many other ways to use a script to show the date last updated (for example).
MouseOver an image
Look at this MouseOver Image example, noting the code and the script components and the linking of the alternating image to a relative location.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function newImg(e){
e.src = "images/task02/study-close.png"
}
function oldImg(e){
e.src = "images/task02/study-far.png"
}
</script>
</head>
<body bgcolor="gray">
<h2>MouseOver and MouseOff 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>
<div>
<img src="images/task02/study-far.png" width="50%" onmouseover="newImg(this)" onmouseout="oldImg(this)">
</div>
<p>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 student in a library]](images/task02/study-far.png)
![[a closer look at the student]](images/task02/study-close.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.
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.