In this section I will demonstrate several different scripts.
Make sure to check out the coaches slideshow below!
This script is a Redskin players script that uses precached
images to display players on the team by either moving the mouse
over the image or selecting a player from a drop down box. The
script also detects your browser and chooses the correct DOM event
based on your browsers event model. You can find the code and
explanation below the first script.
Here is the code
for the above script. First the code in the head section
<script type="text/javascript"><!--
// Simple stuff declaring variables and an Array to hold the values of the
players.
var cacheImages;
if (document.images)
{
var redskins = new Array("Portis", "RandleEl", "Moss", "Archuleta",
"Cooley", "Lloyd");
cacheImages = new Array(6);
// Create instances of the image object and precache the related image
sources.
//** Note that the width and height of the image should be defined
for (var i = 0; i < cacheImages.length ; i++)
{
cacheImages[redskins[i]] = new Image(156,199);
cacheImages[redskins[i]].src = redskins[i] + ".jpg";
}
}
// This function sets the jpgIndex
variable and calls the loadprecached()
function
function rotate()
{
if (document.images)
{
var jpgIndex = document.redskinMouseover.precached.selectedIndex;
if (++jpgIndex > cacheImages.length - 1)
{
jpgIndex = 0;
}
document.redskinMouseover.precached.selectedIndex = jpgIndex;
loadprecached(document.redskinMouseover);
}
}
// This function uses the options[] array of the selection object to
determine the current selection.
function loadprecached(form)
{
if (document.images)
{
var jpgIndex = form.precached.options[form.precached.selectedIndex].value;
document.images[0].src = cacheImages[jpgIndex].src;
}
}
//The crossBrowser function is where your browser detects the event model.
// Start of Mouseover Event Script
// Here the script determines your browsers event model
var MSIE = document.attachEvent ? true : false;
var DOM = document.addEventListener ? true : false;
// Now based on your browsers event model the correct statement will be used
for the right event.
function crossBrowser()
{
if (MSIE)
// You will need to create an id somewhere in the body in this case the id =
"players".
{
document.getElementById("players").attachEvent("onmouseover",rotate);
}
else
if (DOM)
{
document.getElementById("players").addEventListener("mouseover",rotate,
false);
}
}
Now for the body of the script.
// The crossBrowser() function is called when the page is loaded so your
browser type is detected immediately. The option selections for the players
are listed here and note the id="players in the "a href" tag. This is done
so the user can use the mouseover function.
<body onload= "crossBrowser()">
<center><h1>Redskins Mouseover</h1>
<center><form name="redskinMouseover">
<table><tr><td>
<p>Change the image by making a selection.</p>
<select name = "precached" onchange="loadprecached(this.form)">
<option value="Portis">1 - Clinton Portis</option>
<option value="RandleEl">2 - Antwaan Randle El</option>
<option value="Moss">3 - Santana Moss</option>
<option value="Archuleta">4 - Adam Archuleta</option>
<option value="Cooley">5 - Chris Cooley</option>
<option value="Lloyd">6 - Brandon Lloyd</option>
</select><br><br>
<a href="precachedImages.html" id="players">
<img alt="Washington Redskins" src="Portis.jpg"
name="Portis" height"199" width="156" border="2"/></a>
</td></tr>
</table></form></center>
That isn't too hard is it? Well now how about a slideshow using precached
images?
Do you have questions about this or any other script on my site? If so then
e-mail me at webmaster@cayemay.com