Rotate Text with Pictures

Tom Sparks · 02-14-2013, 03:21 AM

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!

felgall · 02-14-2013, 09:05 AM

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.

Philip M · 02-14-2013, 09:52 AM

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.

Tom Sparks · 02-14-2013, 07:51 PM

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

Tom Sparks · 02-14-2013, 08:08 PM

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!

jmrker · 02-14-2013, 08:17 PM

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.