asked on

Rotate images in different <td> at same time - javascript

I have two separate cells in a table. Using Javascript I need to rotate 2 images per cell every 10 seconds.

There are two images to go in the first cell and two different images in the next cell

EG
Right cell needs to loop through images Logo_1.gif and Logo_2.gif while in another cell I need to loop through Product1.gif and Product2.gif

Both cells should loop at the same time ideally using the same timer

hope this makes sense

thanks

Samuel Liew

Try this..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var i=-1;
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var image1 = new Array("img1_1.jpg", "img1_2.jpg", "img1_3.jpg"); // urls of first image
var image2 = new Array("img2_1.jpg", "img2_2.jpg", "img2_3.jpg"); // urls of second image
 
function rotateImages() {
	if(++i>image1.length) i=0;
	img1.src = image1[i];
	img2.src = image2[i];
	setTimeout(rotateImages, 10000);
}
</script>
</head>
 
<body onload="rotateImages();"> <!-- add onload event //-->
<td><img id="img1" src="" /></td> <!-- name the id of the two images "img1" and "img2" //-->
<td><img id="img2" src="" /></td>
</body>
</html>

Open in new window

abel

Go for the solution above, I was interrupted by my girlfriend, but I just have to show mine too. I think it is slightly easier to use, but that's just me...

<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>test</title>
    <style type="text/css">
        img { width: 300px; height:200px; }
    </style>
    <script type="text/javascript">
        function doOnload() {
            setTimeout("OnTimeOut();", 10000);
        }
 
        function OnTimeOut() {
            SwapPictures("rotateA1", "rotateA2");
            SwapPictures("rotateB1", "rotateB2");
            setTimeout("OnTimeOut();", 4000);
        }
        
        function SwapPictures(id1, id2) {
            var src1 = document.getElementById(id1).src;
            document.getElementById(id1).src = document.getElementById(id2).src;
            document.getElementById(id2).src = src1;
        }
    </script>
</head>
<body onload="doOnload()">
    <table>
        <tr>
            <td><img id="rotateA1" src="../images/people1.jpg" alt="people1" /></td>
            <td><img id="rotateA2" src="../images/people2.jpg" alt="people1"  /></td>
        </tr>
        <tr>
            <td><img id="rotateB1" src="../images/people3.jpg" alt="people1"  /></td>
            <td><img id="rotateB2" src="../images/people4.png" alt="people1"  /></td>
        </tr>
    </table>
    
</body>
</html>

Open in new window

wobbled

ASKER

Dropping in the links to my images but the page displays nothing. Looking at the source code and the src is blank.

I dropped in an alert but I do this is not appearing - the function appears not be getting called... any ideas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var i=-1;
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var image1 = new Array("images/G-Spot_logo.gif", "images/G-Spot_logo_pink.gif"); // urls of first image
var image2 = new Array("images/main_dance.jpg", "images/main_dance_pink.jpg"); // urls of second image
 
function rotateImages() {
		alert 'test';
        if(++i>image1.length) i=0;
        img1.src = image1[i];
		
        img2.src = image2[i];
        setTimeout(rotateImages, 10000);
}
</script>
</head>
 
<body onload="rotateImages();"> <!-- add onload event //-->
<table>
<tr>
<td><img id="img1" src="" /></td> <!-- name the id of the two images "img1" and "img2" //-->
<td><img id="img2" src="" /></td>
</tr>
</table>
</body>
</html>

Open in new window

abel

The alert is not coded properly, which is why you get an error (probably suppressed because of your browser settings). Change it to alert("test").

The urls you provided in the code of sam2912 are relative urls. That means that they must remain under a subdirectory (path) from your current link. If not, and the "images" part of the link starts at the root of your site, then prepend them with a "/", like this:

note, I didn't write that code, I'm just analyzing where the problem may be. Alternatively, you can also try my code, of course ;-)

var image1 = new Array("/images/G-Spot_logo.gif", "/images/G-Spot_logo_pink.gif"); // urls of first image
var image2 = new Array("/images/main_dance.jpg", "/images/main_dance_pink.jpg"); // urls of second image

Open in new window

ASKER CERTIFIED SOLUTION

Samuel Liew

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

wobbled

ASKER

Absolutely spot on. Many thanks for your help on this

Rotate images in different &lt;td&gt; at same time - javascript

Rotate images in different <td> at same time - javascript