Javascript array and swap images

Dev Shed Forums Sponsor:

September 8th, 2004, 03:54 PM

rooroo

Contributing User

Join Date: Sep 2004

Posts: 44

Time spent in forums: 9 m 50 sec
Reputation Power: 9

Javascript array and swap images

Hi everyone.
I'm fairly new to javascript so please go easy on me.
I have a page of thumbnails that when clicked open in another window. I wanted to make only one html file for all of the popups, so the image number is sent through the url then decoded and called from an array:

Code:

<script language="Javascript">
<!--
 function createRequestObject() {
   var query = '' + this.location;
    //Get URL
    
   query = query.substring((query.indexOf('?')) + 1);
    // Keep everything after the question mark '?'.
   return query;
 }

query = createRequestObject();
query2 = eval(query);

var beginhtml = "<img src=\"";
var endhtml = " width=\"640\" height=\"480\">";
var image = new Array();
image[00] = "/images/image00b.jpg\" name=\"screenswap\"";
image[01] = "/images/image01b.jpg\" name=\"screenswap\"";

And later in the document the image is positioned:

Code:

  <tr> 
    <td colspan="3">

		<script language="JavaScript">
			<!--
			document.write(beginhtml + image[query2] + endhtml);
			//-->
		</script>
	</td>
  </tr>

What needs to happen now is for the image to change via a "Next" or "Back" button either one up or one down in the array. I've tried a few scripts I found on here that deal with swapping images using an array, but none have worked. The latest one I tried is:

Code:

function move(distance)
  {
  for(var i=query2; i < image.length; i++)
    {
    if(image[i].src == document.images['screenswap'].src)
      {
      var move = i+distance;
      if((distance > 0 && move < image.length) || (distance < 0 && move >= 0))
        {
        document.images['screenswap'].src=image[move].src;
        break;
        }
      }
    }
  }

And the next button looks like this:

Code:

 <td width="122"><a href="#" onclick="javascript:move(1);"><img src="../images/next.jpg" width="122" height="17" border="0"></a></td>

When I click the next button, the image doesn't swap and no errors are reported. Any suggestions?

Thanks everyone.

September 8th, 2004, 04:35 PM

jacktasia

Contributing User

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Feb 2004

Location: Lawrence, Kansas [KU]

Posts: 1,559

Time spent in forums: 2 Days 14 h 10 m 18 sec
Reputation Power: 14

is there any reason why you're not using a server-side language for this? i think it would be a much better idea...

__________________
Jack
---------

Mancala Time: Play mancala online for free. A multiplayer game.

Find Words: Finds words for crossword puzzles and word games.

September 8th, 2004, 06:32 PM

ChiefWigs1982

Cunning Linguist

Dev Shed God 11th Plane (10000 - 10499 posts)

Join Date: Jul 2003

Location: I used to live at home, now I stay at the house

Posts: 10,180

Folding Points: 50746 Folding Title: Beginner Folder

Time spent in forums: 3 Months 3 Weeks 5 Days 19 h 54 m 23 sec
Reputation Power: 2037

Yeah, Jack's right, use soemthing like php or asp for this, then all you have to do is put the name of the image you want shown in the url, and use the script to load the particular img...

__________________

Support requests via PM will be ignored!
Sites: WordPress Metro Theme | Route of Queue
Read These: The General Rules Thread | The General FAQ Thread | NEW USERS - How to post a question

September 8th, 2004, 08:50 PM

rooroo

Contributing User

Join Date: Sep 2004

Posts: 44

Time spent in forums: 9 m 50 sec
Reputation Power: 9

I just took a class on Javascript and was trying to use some of what I learned. I got stuck at this point. Plus I don't know PHP. I understand that it's similar to Javascript but since I have a pretty limited understanding of javascript as it is, I didn't want to move on to another language until I got the hang of one.

So, got any ideas?

September 8th, 2004, 09:22 PM

ChiefWigs1982

Cunning Linguist

Join Date: Jul 2003

Location: I used to live at home, now I stay at the house

Posts: 10,180

Time spent in forums: 3 Months 3 Weeks 5 Days 19 h 54 m 23 sec
Reputation Power: 2037

Yeah, but js really isn't the way to go for this project...

September 8th, 2004, 09:34 PM

jacktasia

Contributing User

Join Date: Feb 2004

Location: Lawrence, Kansas [KU]

Posts: 1,559

Time spent in forums: 2 Days 14 h 10 m 18 sec
Reputation Power: 14

Quote:

Originally Posted by ChiefWigs1982

Yeah, but js really isn't the way to go for this project...

agreed.

yeah, you /can/ do this with javascript but it's like cutting a steak with a spoon...just use the knife [php, other server-side language]...it would be really simple php compared to rather painful javascript....multiple languages exist for the same reason that multiple utensils do......

September 8th, 2004, 09:39 PM

rooroo

Contributing User

Join Date: Sep 2004

Posts: 44

Time spent in forums: 9 m 50 sec
Reputation Power: 9

That would be great except that I don't know how to write PHP.

September 9th, 2004, 06:46 AM

ChiefWigs1982

Cunning Linguist

Join Date: Jul 2003

Location: I used to live at home, now I stay at the house

Posts: 10,180

Time spent in forums: 3 Months 3 Weeks 5 Days 19 h 54 m 23 sec
Reputation Power: 2037

You'd open the popup with something like...

Code:

var picPiage=window.open('picPage.php?pic=pic24','picPage','width=200,height=200');

then the code for the picPage.php would just be...

PHP Code:


		
			
<html>

<body>

<?php

   if (isset($_GET['pic']))

   {

      echo '<img src="images/'.$_GET['pic'].'.gif" width="180 height="180" alt='.$_GET['pic'].' />';

   }

   else

   {

      echo 'Sorry, you have not specified a picture to display...';

   }

?>

</body>

</html>

That should do for ya!

Last edited by ChiefWigs1982 : September 9th, 2004 at 12:56 PM.

September 9th, 2004, 10:27 AM

rooroo

Contributing User

Join Date: Sep 2004

Posts: 44

Time spent in forums: 9 m 50 sec
Reputation Power: 9

Thanks for your help!

Javascript array and swap images

Developer Shed Advertisers and Affiliates