A Scripted Image Object and Rotating Images



/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/


<HTML>
<HEAD>
<TITLE>Image Object</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// global declaration for 'desk' images array
var imageDB
// pre-cache the 'desk' images
if (document.images) {
    // list array index names for convenience
    var deskImages = new Array("desk1", "desk2", "desk3", "desk4")
    // build image array and pre-cache them
    imageDB = new Array(4)
    for (var i = 0; i < imageDB.length ; i++) {
        imageDB[deskImages[i]] = new Image(120,90)
        imageDB[deskImages[i]].src = deskImages[i] + ".gif"
    }
}
// change image of 'individual' image
function loadIndividual(form) {
    if (document.images) {
        var gifName = form.individual.options[form.individual.selectedIndex].value
        document.thumbnail1.src = gifName + ".gif"
    }
}
// change image of 'cached' image
function loadCached(form) {
    if (document.images) {
        var gifIndex = form.cached.options[form.cached.selectedIndex].value
        document.thumbnail2.src = imageDB[gifIndex].src
    }
}
// if switched on, cycle 'cached' image to next in queue
function checkTimer() {
    if (document.images && document.Timer.timerBox.checked) {
        var gifIndex = document.selections.cached.selectedIndex
        if (++gifIndex > imageDB.length - 1) {
            gifIndex = 0

}
        document.selections.cached.selectedIndex = gifIndex
        loadCached(document.selections)
        var timeoutID = setTimeout("checkTimer()",5000)
    }
}
// reset form controls to defaults on unload
function resetSelects() {
    for (var i = 0; i < document.forms.length; i++) {
        for (var j = 0; j < document.forms[i].elements.length; j++) {
            if (document.forms[i].elements[j].type == "select-one") {
                document.forms[i].elements[j].selectedIndex = 0    
            }
        }
    }
}
// get things rolling
function init() {
    loadIndividual(document.selections)
    loadCached(document.selections)
    setTimeout("checkTimer()",5000)
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()" onUnload="resetSelects ()">
<H1>Image Object</H1>
<HR>
<CENTER>
<TABLE BORDER=3 CELLPADDING=3>
<TR><TH></TH><TH>Individually Loaded</TH><TH>Pre-cached</TH></TR>
<TR><TD ALIGN=RIGHT><B>Image:</B></TD>
<TD><IMG SRC="cpu1.gif" NAME="thumbnail1" HEIGHT=90 WIDTH=120></TD>
<TD><IMG SRC="desk1.gif" NAME="thumbnail2" HEIGHT=90 WIDTH=120></TD>
</TR>
<TR><TD ALIGN=RIGHT><B>Select image:</B></TD>
<FORM NAME="selections">
<TD>
<SELECT NAME="individual" onChange="loadIndividual(this.form)">
<OPTION VALUE="cpu1">Wires
<OPTION VALUE="cpu2">Keyboard
<OPTION VALUE="cpu3">Desks
<OPTION VALUE="cpu4">Cables
</SELECT>
</TD>
<TD>
<SELECT NAME="cached" onChange="loadCached(this.form)">
<OPTION VALUE="desk1">Bands
<OPTION VALUE="desk2">Clips
<OPTION VALUE="desk3">Lamp
<OPTION VALUE="desk4">Erasers
</SELECT></TD>
</FORM>
</TR></TABLE>
<FORM NAME="Timer">
<INPUT TYPE="checkbox" NAME="timerBox" onClick="checkTimer()">Auto-cycle through
 pre-cached images
</FORM>
</CENTER>
</BODY>
</HTML>
A Scripted Image Object and Rotating Images : Image Img : HTML JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » HTML » Image Img »

A Scripted Image Object and Rotating Images

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS
