Solved

Swapping images with JavaScript using arrays

Posted on 2007-04-08
5
1,215 Views
Last Modified: 2013-11-19
Hi there

I'm trying to create a page with one large image with a link underneath it called 'next'. When you click on it the image swaps. For some reason, although it works, I keep getting errors. In iexplorer it says 'document.images[..] is null or not and object' and firefox says 'document.images[imgName].src has no properties'.

The HTML code looks like this:
<div id="container">
  <div id="imageContent">
   <img src="_photos/_architecture/_full/arch3_lrg.jpg" name="mainPhoto" alt="London Blackfriars" width="432" height="504" border="0" />
   <div id="buttons"><a href="javascript:switchImageNext('mainPhoto','imgSrc')"> next&nbsp;>></a></div>
  </div>
</div>

The javascript looks like this:
var $images = new Array('arch4_lrg.jpg','arch_gla_lrg.jpg','arch3_lrg.jpg');
var $images_total = $images.length;
var count = 0;

function switchImageNext(imgName,imgSrc)

{
  if (count < $images_total)
  {       
        imgSrc = $images[count];
        
        document.images[imgName].src = imgSrc;
        
        count++;
  }
  else
          count = 0;
          switchImageNext();
}
0
Comment
Question by:tchristiansen
5 Comments
 
LVL 4

Expert Comment

by:cheesygit182
ID: 18873477
erm, can't see anything wrong with that, although it is pretty similar to this: http://www.thescripts.com/forum/thread424621.html
is there a url where I can see this 'in action', so I can check it out with FireBug?

~cheesygit182
0
 
LVL 2

Expert Comment

by:faridur
ID: 19232489
Possible reasons:

1. Check that the filename of the images are same as the array. Some image editors save files with an uppercase extension. e.g. arch4_lrg.jpg in the array but arch4_lrg.JPG in the actual image

2. Your array does not have the folder path

3. In the "ELSE", the function name does not have the variable name i.e. switchImageNext(imgName);

function switchImageNext(imgName)

{
try{
      
      if (count < $images_total)
        {      
                  imgSrc = $images[count];
                  document.images[imgName].src = imgSrc;

                  count++;
        }
        else{
                    count = 0;
                    switchImageNext(imgName);
                    }
}
catch(e)
      {
      alert(e.message);
      }
}
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 19396430
You need to return false on the click and not use the href
Here is a much simpler version of the code you posted
<html>
<head>
<script>
var $images = new Array('arch4_lrg.jpg','arch_gla_lrg.jpg','arch3_lrg.jpg');
var $images_total = $images.length;
var count = 0;

function switchImageNext(imgName) {
  document.images[imgName].src = $images[count];
//  document.images[imgName].title = $images[count]; // debug
  count++;
  if (count >= $images_total) count=0;
  return false
}
 
</script>
</head>
<body>
<div id="container">
 <div id="imageContent">
  <img src="_photos/_architecture/_full/arch3_lrg.jpg" name="mainPhoto" alt="London Blackfriars" width="432" height="504" border="0" />
  <div id="buttons"><a href="#" onClick="return switchImageNext('mainPhoto')"> next&nbsp;>></a></div>
 </div>
</div>
</body>
</html>
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Removing Flash from Website 6 38
CSS: Element name is not scoping properly 4 71
Web Development Tools for MVC 3 63
Form submit issue 11 54
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now