By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,665 Members | 1,478 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,665 IT Pros & Developers. It's quick & easy.

How to make images change using next and previous buttons.

Mary Seelye
P: 14
This is what I have so far -
I cannot get my next link to work, but my previous link works after you change the pic by clicking on it. I'd like to take the "onclick" out and just use the next and previous links to change the pictures. I have 5 pictures and I can only get two to 'almost' work:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Townhouse</title>
  6. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  7. <link rel="stylesheet" href="pineknoll_styles.css" type="text/css" />
  8. <script type="text/javascript">
  9. /* <![CDATA[ */
  10. var curImage = "townhouse";
  11. var cImages = [
  12. 'townhouse.jpg',
  13. 'townhouse2.jpg',
  14. 'townhouse3.jpg',
  15. 'townhouse4.jpg',
  16. 'townhouse5.jpg'
  17. ];
  18. function townhousePics() {
  19. if (curImage =="townhouse.jpg") {
  20. document.images[0].src = "townhouse2.jpg";
  21. curImage = "townhouse2";
  22. }
  23. else {
  24. document.images[0].src = "townhouse2.jpg";
  25. curImage = "townhouse2";
  26. }
  27. }
  28. /* ]]> */
  29. </script>
  30. </head>
  31. <body>
  32. <table width="350">
  33. <tr>
  34. <td>Townhouse: <strong>$319,000</strong></td>
  35. <td><a href="" onclick="self.close();">Close Window</a></td>
  36.  
  37. </tr>
  38. </table>
  39. <img src="townhouse.jpg" height="233" width="350"
  40. onclick="townhousePics();" alt="photo of a townhouse" /><br />
  41. <p>4 bed, 2 bath, 17,33 square feet, .42 acres</p>
  42. <td><a href="" onclick="button;">Next</a></td>
  43. <td><a href="" onclick="button;">Previous</a></td>
  44.  
  45. </body>
  46. </html>
Oct 16 '10 #1

✓ answered by gits

then you might use a simple logic that we already used in your previous thread here. you could use a counter to make use of the image-sources in the array:

Expand|Select|Wrap|Line Numbers
  1. var curImage = 0;
  2. var cImages = [
  3.     'townhouse.jpg',
  4.     'townhouse2.jpg',
  5.     'townhouse3.jpg',
  6.     'townhouse4.jpg',
  7.     'townhouse5.jpg'
  8. ];
  9.  
  10. function townHousePics(direction) {
  11.     if (direction == 'next') {
  12.         curImage++;
  13.  
  14.         if (curImage == 5) {
  15.             curImage = 0;
  16.         }
  17.     } else {
  18.         curImage--;
  19.         // even reset the counter here when
  20.         // its getting 0
  21.     }
  22.  
  23.     document.images[0].src = cImages[curImage];
  24. }
  25.  
and in your links call the function like:

Expand|Select|Wrap|Line Numbers
  1. <a href="" onclick="townHousePics('next'); return false;">Next</a>
  2. <a href="" onclick="townHousePics('previous'); return false;">Previous</a>

Share this Question
Share on Google+
7 Replies


gits
Expert Mod 5K+
P: 5,223
so do you just want to use 2 pictures or more?
Oct 17 '10 #2

Mary Seelye
P: 14
I'd like to use 5
Oct 17 '10 #3

gits
Expert Mod 5K+
P: 5,223
then you might use a simple logic that we already used in your previous thread here. you could use a counter to make use of the image-sources in the array:

Expand|Select|Wrap|Line Numbers
  1. var curImage = 0;
  2. var cImages = [
  3.     'townhouse.jpg',
  4.     'townhouse2.jpg',
  5.     'townhouse3.jpg',
  6.     'townhouse4.jpg',
  7.     'townhouse5.jpg'
  8. ];
  9.  
  10. function townHousePics(direction) {
  11.     if (direction == 'next') {
  12.         curImage++;
  13.  
  14.         if (curImage == 5) {
  15.             curImage = 0;
  16.         }
  17.     } else {
  18.         curImage--;
  19.         // even reset the counter here when
  20.         // its getting 0
  21.     }
  22.  
  23.     document.images[0].src = cImages[curImage];
  24. }
  25.  
and in your links call the function like:

Expand|Select|Wrap|Line Numbers
  1. <a href="" onclick="townHousePics('next'); return false;">Next</a>
  2. <a href="" onclick="townHousePics('previous'); return false;">Previous</a>
Oct 17 '10 #4

Mary Seelye
P: 14
Thank you so much again! You are awesome, I really appreciate all the help!
Oct 17 '10 #5

gits
Expert Mod 5K+
P: 5,223
no problem :) ... that's why we're here for ...

kind regards
Oct 17 '10 #6

P: 1
@gits
Hi,
I have to put images in the folder. How can we implement this method?
1 Week Ago #7

gits
Expert Mod 5K+
P: 5,223
what folder? you need to explain more what you want to achieve and what you have already - else any answer would just be guesswork.
1 Week Ago #8

Post your reply

Sign in to post your reply or Sign up for a free account.