Solved

Swapping images with JavaScript using arrays

Posted on 2007-04-08
5
1,219 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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 the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 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

16 Experts available now in Live!

Get 1:1 Help Now