?
Solved

Swapping images with JavaScript using arrays

Posted on 2007-04-08
5
Medium Priority
?
1,249 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

Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

Question has a verified solution.

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

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
Suggested Courses

764 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