JavaScript Arrays - Associating Images and Links
(Page 4 of 5 )
The question now is, how do we ensure that each image is associated with the correct link? Simple, we use another set of arrays to hold each of the links, and use the same random number that was generated for the image to tie the correct link to each of the images that are displayed:
links1 = new Array
("gaintek.htm","gfarce.htm","leadward.htm",
"matrax.htm",
"nvideon.htm")
links2 = new Array("abyte.htm","dfrock.htm","epoch.htm","gigasus.htm",
"saltech.htm")
links3 = new Array("datastore.htm","maxgate.htm","sambell.htm",
"toshachi.htm",
"wmax.htm")
links4 = new Array("amg.htm","amg32.htm","amg65.htm","nuetrino.htm",
"outel.htm")
links5 = new Array("corstan.htm","critical.htm","generic.htm",
"kingmos.htm",
"twinsung.htm")
So, if randomNum1 equals 3, the script will display deals1[3] (images/gcards/leadward.gif) and links1[3] (leadward.htm), both of which are the correct values. This is why each link needs to be at the same index as the image it is paired with in each of the arrays. To actually make the links work, we need to create some more functions (one for each of the product lines). Add the following code chunk:
function newLocation1() {
document.location.href = links1[randomNum1]
}
All this does is set the URL of the page to the correct link. The function will be called when the image is clicked on, which means we will need to add some code to the HTML document as well, which will be explained shortly.
Next, we need to think about the roll-overs. Again, we need to ensure that the correct roll-over image is coupled with its counterpart. Some more code needs to be nestled among the HTML on the page itself, but we can set the array in the .js file:
dealsover1 = new Array("images/gcards/gaintek-
over.gif","images/gcards/gfarce-
over.gif","images/gcards/leadward-
over.gif","images/gcards/matrax-
over.gif","images/gcards/nvideon-over.gif")
dealsover2 = new Array("images/mobos/abyte-
over.gif","images/mobos/dfrock-
over.gif","images/mobos/epoch-
over.gif","images/mobos/gigasus-
over.gif","images/mobos/saltech-over.gif")
dealsover3 = new Array("images/hdds/datastore-
over.gif","images/hdds/maxgate-
over.gif","images/hdds/sambell-
over.gif","images/hdds/toshachi-
over.gif","images/hdds/wmax-over.gif")
dealsover4 = new Array("images/cpus/amg-
over.gif","images/cpus/amg32-
over.gif","images/cpus/amg65-
over.gif","images/cpus/nuetrino-
over.gif","images/cpus/outel-over.gif")
dealsover5 = new Array("images/ram/corstan-
over.gif","images/ram/critical-
over.gif","images/ram/generic-
over.gif","images/ram/kingmos-
over.gif","images/ram/twinsung-over.gif")
That is all that needs to be done with the JavaScript file, so save it with a .js extension and open a new text file.
Next: What to Put into the HTML >>
More JavaScript Articles
More By Dan Wellman
