Solved

Swapping images with JavaScript using arrays

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

Industry Leaders: 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

Suggested Solutions

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

737 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