CodingForums.com - Rotate Text with Pictures

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Rotate Text with Pictures (http://www.codingforums.com/showthread.php?t=287612)

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!

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.

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.

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

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!

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.