|
JavaScript Eye Candy
JavaScript is great for fun, decorative
special effects. The JavaScript
Source is one place to find scripts that you can use on your own
site. Their good documentation makes adding them pretty easy.
Use the FrontPage 2000 HTML View to add a JavaScript.
Set Image
The following is an example of a script
called "Set
Image". This script is used on the home page of Parents
as Teachers. It's best to use pictures that are the same
size. The script below is presented as it appears on the Set
Image documentation of the JavaScript Source site. I've added in additional comments and recommendations.
<!-- TWO STEPS TO INSTALL SET IMAGE:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Ronnie T. Moore, Editor -->
<!-- Web Site: The JavaScript Source -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var dallas = new Image();
var sandiego = new Image();
var tokyo = new Image();
dallas.src = "http://javascript.internet.com/img/
change-image/dallas-large.jpg";
sandiego.src ="http://javascript.internet.com/img/
change-image/sandiego-large.jpg";
tokyo.src = "http://javascript.internet.com/img/
change-image/tokyo-large.jpg";
function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");
}
// End -->
</script>
</HEAD>
My Notes: You need to change the word after
var to one word representing the hyperlink. Use that same word
before .src=. There's no need for a long "http . . . ."
link to the image. If you keep all of your images in an images
folder that is in the same directory as the page you're adding the
script to, you can use code
similar to what's used on the Parents
as Teachers site:
var overview = new Image();
var news = new Image();
overview.src = "images/mombabyboysm.jpg";
news.src = "images/boyintubsm.jpg";
Be sure to check the relative path of the
picture file. If your images don't display, it
could be that you need to change the relative path to the images.
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<center>
<table border=1>
<tr><td>
<center><h2>Places I've been:</h2></center>
<p>
<li><a href = "http://www.dallas.com" onmouseover =
"doButtons('dallas')">Dallas<p>
<li><a href = "http://www.sannet.gov" onmouseover =
"doButtons('sandiego')">San Diego<p>
<li><a href = "http://www.japan-guide.com" onmouseover =
"doButtons('tokyo')">Tokyo<p>
My Notes: If the hyperlink goes
outside of your website, use the full URL beginning with
http://... If it's a hyperlink to a page within your site, use the
relative link instead. Add the onFocus event handler to make this
effect work with a keyboard as well as with a mouse. An example
from the Parents as Teacher site:
<a href="overview/welcome.htm"
onfocus="doButtons('overview')" onmouseover="doButtons('overview')">Overview</a>
<td>
<img name=picture src="blank.gif" width=440 height=300 border=0>
My Notes: You need to have a small
transparent gif image named blank.gif in your images file. Change
the width and height to match the size of your images. Leave 'name=picture' alone. It's important to add the alt attribute. For
example, the code, <img name="picture" src="blank.gif"
width="200" height="200" border="0"
alt="photos of parents and children">, creates a
transparent square measuring 200 by 200 pixels. When the links are
moused over, this is where the photos of parents and children will appear.
</td>
</tr>
</table>
</center>
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 1.52 KB -->
My Notes: Once the script is
working, you can go back to change the layout, font sizes, etc. of your
page.
Top of Page
| 
Home
- Services - Portfolio
- Resources
- About
- Contact
