Home arrow JavaScript arrow Page 4 - JavaScript Arrays
JAVASCRIPT

JavaScript Arrays


Arrays in JavaScript are extremely useful for storing and manipulating information you have coded directly into the script, or information collected from the browser. In this article, Dan Wellman details how to use and manipulate them.

Author Info:
By: Dan Wellman
Rating: 3 stars3 stars3 stars3 stars3 stars / 128
May 25, 2005
TABLE OF CONTENTS:
  1. · JavaScript Arrays
  2. · Multidimensional Arrays and Use
  3. · Beginning Code
  4. · Associating Images and Links
  5. · What to Put into the HTML

print this article
SEARCH DEVARTICLES

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. 


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials