Tools for Information Literacy
Practice with client side examples
Work on task 02.03, ...
... or 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
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.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
<!--
// preload two images - they must be about the same size!
var normalButton = new Image(273,225);
var reverseButton = new Image(274,220);
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]](images/unc_duke.jpg)
![[a better two letter symbol]](images/UNC_athleticsLOGO.jpg)
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.
Example - 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.