<%response.buffer=True%> <% function rw(str) response.write str end function function html(str) response.write(server.HTMLEncode(str)) end function function url(link,str) response.write "" & str & "" end function %> [CTN162:lessons | topics]
[CTN162: Lessons & Topics]

Day 6: Multiple Image Swapping/Looping Constructs

Multiple Image Swaps: Another way to use image swapping is to swap out multiple images on a page, if a link is moused over. The developer must use a blank image as the initial source, and must devise ways to swap multiple images, either via creating individual function calls, and calling different functions for each mouseover, or by sending in different named locations, and swapping all named locations out at each call to the function. Here is an example of functions that are called out separately, each for the images that are called by that specific link:

function topLeft(top,left){
document.topleft.src = eval(top + ".src");
document.bottomleft.src = eval(left + ".src");
}
function topRight(top,right){
document.topright.src = eval(top + ".src");
document.bottomright.src = eval(right + ".src");
}
function diagRight(top,right){
document.topleft.src = eval(top + ".src");
document.bottomright.src = eval(right + ".src");
}
function diagLeft(top,left){
document.topright.src = eval(top + ".src");
document.bottomleft.src = eval(left + ".src");
}
function off(){//Clear all images back to spacer gif
document.topright.src = spacer.src;
document.topleft.src = spacer.src;
document.bottomright.src = spacer.src;
document.bottomleft.src = spacer.src;
}

<p><a href="link.htm" onMouseOver="topLeft('see','ad')"; onMouseOut="off()">Right Side</p>
<p><a href="link.htm" onMouseOver="topRight('puzzled','dont')"; onMouseOut="off()">Left Side</p>
<p><a href="link.htm" onMouseOver="diagRight('blue','notblue')"; onMouseOut="off()">Diagonal Right</p>
<p><a href="link.htm" onMouseOver="diagLeft('candy','sore')"; onMouseOut="off()">Diagonal Left</p>>

Note that the "off" state calls the spacer image (blank) for each named location, therefore nothing in this case needs to be passed to the function. Example: Multiple Image Swaps

Looping: There are times that we want code to execute, but want to control how many times it executes in a dynamic fashion. One of the ways we can do that is by looping, where we determine the number of times code is to execute:

function loopIt(myNum){

var myNum = 0;

while(myNum < 10){

alert("My alert has annoyed you " + myNum + " times!");

myNum = myNum + 1;

}

This function will display the alert 10 times, once each while the counter (myNum) works its way from zero to 9.

Note the counter can also be incremented with a shortcut, by calling:

myNum++;

The "++" is shorthand for adding one to an already existing number. Various other operators are covered in Chapter 5 of our book.

Another way to create a loop is by using the For/Next construct. The logic is to loop through code, incrementing a counter one at a time, similar to the last example:

for(var x = 0; x<10; x++){

alert("My alert has annoyed you " + x + " times!");

}

The code in this example produces the same output. The advantage in this method is the for loop creates the variable "x", declares how long it will run (while x < 10) and then increments the counter (x++) all in one quick (but confusing) piece of code. We will find out later how useful this looping structure will be while dealing with Arrays.

 

 

 

Back To Top

 
2000, 2001, 2002 webdeavor, INC. & newmanic,   All rights reserved