Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Swapping images with JavaScript using arrays

Posted on 2007-04-08
5
Medium Priority
?
1,252 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 2000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
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 …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

610 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