Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Rotate Text with Pictures

    I'm trying to figure out how to cycle a set of pictures with the corresponding descriptions in a table, here is my picture code:
    Code:
    <script type="text/javascript">
    	var imgArray = new Array(6);
    	imgArray[0] = new Image;
    	imgArray[0].src = "../Images/LondonBus.jpg";
    	imgArray[1] = new Image;
    	imgArray[1].src = "../Images/eiffeltower.jpg";
    	imgArray[2] = new Image;
    	imgArray[2].src = "../Images/polishmines.jpg";
    	imgArray[3] = new Image;
    	imgArray[3].src = "../Images/vailskiing.jpg";
    	imgArray[4] = new Image;
    	imgArray[4].src = "../Images/steamboatskiing.jpg";
    	imgArray[5] = new Image;
    	imgArray[5].src = "../Images/polishmines.jpg";
    
    	var index =0;
    
    
    	function cycle()
    	{
       
    	document.pic.src = imgArray[index].src;
    		index++;
    		if (index==6)
    		{
    			index = 0;
    		}
    		setTimeout("cycle()", 3000);
    		return;
    	}
    </script>
    But the main problem I have is converting similar code into rotating text,
    Code:
    <SCRIPT type = "text/javascript">
    quotation = new Array();
    quotation[0] = "London"
    quotation[1] = "Paris"
    quotation[2] = "Poland"
    quotation[3] = "Vail"
    quotation[4] = "Steamboat"
    quotation[5] = "Poland"
    
    function cycle()
    	{
    	document.text.src = imgArray[index].src;
    		index++;
    		if (index==6)
    		{
    			index = 0;
    		}
    		setTimeout("cycle()", 3000);
    		return;
    	}
    window.onload=changetext();
    </script>
    I know that the document.text.src is wrong for text references so how could I link that to a div id or table box?
    Thank you!
    Last edited by Tom Sparks; 02-14-2013 at 04:21 AM. Reason: ....may have forgotten to close the code tags...

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    With just the minimum changes to your code to get it to work you would end up with something like this:

    Code:
    <img id="pic" src="../Images/polishmines.jpg">
    <div id="txt">Poland</div>
    <script type="text/javascript">
    	var imgArray = [];
               var quotation = [];
    	imgArray[0] = new Image;
    	imgArray[0].src = "../Images/LondonBus.jpg";
               quotation[0] = "London";
    	imgArray[1] = new Image;
    	imgArray[1].src = "../Images/eiffeltower.jpg";
               quotation[1] = "Paris";
    	imgArray[2] = new Image;
    	imgArray[2].src = "../Images/polishmines.jpg";
               quotation[2] = "Poland";
    	imgArray[3] = new Image;
    	imgArray[3].src = "../Images/vailskiing.jpg";
               quotation[3] = "Vail";
    	imgArray[4] = new Image;
    	imgArray[4].src = "../Images/steamboatskiing.jpg";
               quotation[4] = "Steamboat";
    	imgArray[5] = new Image;
    	imgArray[5].src = "../Images/polishmines.jpg";
               quotation[5] = "Poland";
    	var index =0;
    
    
    function cycle()
    	{
     	document.getElementById('pic').src = imgArray[index].src;
               document.getElementById('txt').innerHTML = quotation[index]; 
    		index++;
    		if (index==6)
    		{
    			index = 0;
    		}
    	}
    setInterval(cycle, 3000);
    See http://javascriptexample.net/anim04.php for how I would tackle a slideshow like this if I were writing it from scratch.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    Tom Sparks (02-14-2013)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,313
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Have a look at

    http://www.codingforums.com/showthread.php?t=247547 Post #5


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you that helped a lot! It did not occur to me to set it up as a slide show. I am having a little problem centering the image(s) in their box:
    Code:
    td.image {-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px;background:white;}
    I tried the margin-align:auto and tried and true align="center" in the img src tags of the .html document. Do I adjust the padding?
    Cheers
    Tom Sparks

  • #5
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Disregard my last post I used padding instead although I would have preferred an auto v-align and h-align attribute.
    Thank you for your help!

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb

    Another shot at some alternative code...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    
    <style type="text/css">
    img { height:100px; width:75px; }
    div { text-align:center; }
    </style>
    
    </head>
    <body>
    <div id="debugger"></div>
    <table id="tbl" border="0">
     <tr>
      <td><img src=""><div></div></td>
      <td><img src=""><div></div></td>
      <td><img src=""><div></div></td>
      <td><img src=""><div></div></td>
      <td><img src=""><div></div></td>
      <td><img src=""><div></div></td>
     </tr>
    </table>
    
    <script type="text/javascript">
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg','21.jpg'];
    var txtList = ['Exhausted','Confused','Ecstatic','Guilty','Suspicious','Angry'];
    
    var index =0;
    function cycle() {
      index += 1;  index = (index % imgList.length);
    
      var sel = document.getElementById('tbl').getElementsByTagName('img');
      for (var i=0; i<sel.length; i++) {
        var j=((i+index) % imgList.length);
        sel[i].src = baseURL+imgList[j];
      }
      var sel = document.getElementById('tbl').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) {
        var j=((i+index) % imgList.length);
        sel[i].innerHTML = txtList[j];
      }
      setTimeout("cycle()", 3000);
    }
    window.onload = function() {
      cycle();
    }
    </script>
    
    </body>
    </html>
    You could also use <th> instead of <td> and drop the CSS for the <div> tag.
    Gives a darker font, but that is adjustable as well.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •