Dreamweaver let's you create many "behaviors" that use javascript, without having to know exactly what's going on.
But with just a little knowledge of what's going on, you can take advantage of the many repositories on the Web of useful, free-to-use javascripts, and write some simple ones for your own projects.
Chapter 12Here's a sneaky way to display your e-mail address:
<p>Here's a sneaky way to write your e-mail address:
<b
style='color: #b33'>
<script type="text/javascript">
document.write("paulmr"+"@goshen.edu");
</script>
</b></p>
Or, this is can be re-written as a function declaration in the head section of a document:
<head>
<script type="text/javascript">
<!--
function showGCaddress(username){
document.write( username + '@goshen.edu' );
}
// End -->
</script>
</head>
<body onLoad="[initialize something]">
And then, at the point you wish to show your address you do this:
<script type="text/javascript">
showGCaddress("paulmr");
</script>
Where is that new world? [javascript image swap example]
<p align=center>
|
| The mouse enters the box associated with some tag. |
onMouseOver |
| The mouse leaves the box. |
onMouseOut |
| The mouse is pressed and released. |
onClick |
| The 'submit' button is pressed (applies to the <FORM ... > tag). |
onSubmit |
| One item from a drop down menu is selected (applies to the <SELECT> tag) |
onChange |
| A page loads (applies to the <BODY> tag) |
onLoad |
| an element is selected (de-selected) |
onFocus (onBlur) |
The DOM is a way of naming (and changing!):
Try each of these by moving your mouse over top ('onMouseOver') the link...
<a href='' onMouseOver="document.getElementById('colon').hspace='35'">do it</a>:
do it
undo it
...ById('colon').width='157':
do it
undo it
...ById('colon').align='left':
do it
undo it
...ById('colon').border='3':
do it
undo it
The image at the right has id='colon', and here's a bit of text that wraps beside it.
document.getElementById('sp').style.color='#5b5':
do it
undo it
...ById('sp').style.fontSize='2.5em':
do it
undo it
...ById('sp').style.fontFamily='Times,serif':
do it
undo it
...ById('sp').style.border='1px dashed #933':
do it
undo it
...ById('sp').style.display='none':
do it
undo it
This here text is in a paragraph marked with id='sp' ("sample paragraph"). So let's see if we can change its style.
Or, a couple all at once:
aStyle=document.getElementById('sp').style;<a href="javascript;" onClick="document.getElementById('whither').src='colonr.jpg'; return false">Point right</a>
One or more javascript commands can be executed at the place in the web page where they occur, between <script>...</script> tags like this:
|
<script type="text/javascript"> |
If an event triggers more than just one or two javascript commands, the commands are typically packaged up in a function declaration -- sort of a little computer program -- which is usually placed in the <head>..</head> section of a web page.
| <head> <form> |
Or, (just like with CSS rules) javascript can be put in an external file that you link to like this:
| <script type="text/javascript" src="prototype.js"></script> |
To transfer javascript functionality from one page to another you usually have to copy the triggers and the functions. Sometimes a third thing that must be copied is a function call in the body tag, e.g. <body onLoad="something()">, a piece that initializes things as the page loads.
Lightbox is an open-source javascript library that you can use to display images in an animated fashion.
Make a copy of your digital camera lab in the same folder as the original. Make sure that your thumbnails are linking to the larger images directly (not to a *page* with the larger image embedded). (I'll use this lighter-weight page, lb.html, as an example.)
Follow the "How to use" instructions on the page above, but instead of using the locations that they suggest for the javascript and css files, use the location of the ones already installed on the GC webserver:
/js/prototype.js
/js/scriptaculous.js?load=effects
/js/lightbox.js
/g/lightbox.css
Huh? No mouse events to re-program? Here lightbox is replacing one of the "normal" actions on our page (clicking a link to navigate somewhere else) with its own scripted action.
