Welcome to WebmasterWorld Guest from 54.162.107.231

Forum Moderators: open

Message Too Old, No Replies

image change with javascript

How can i do this?

     

pauliv

2:14 am on Mar 7, 2002 (gmt 0)

Inactive Member
Account Expired

 
 


How to make several images change one after another within the table cell?
2:50 am on Mar 7, 2002 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2159
votes: 8


Do you mean on an event or as a rotating banner?

pauliv

2:55 am on Mar 7, 2002 (gmt 0)

Inactive Member
Account Expired

 
 


I mean as a rotating banner.....
i v got this script but i cant make it work proprly in a table cell..maibe you can help me fix this?:
<html>
<head>
<script language="JavaScript">

// Variables
// ----------
var Step = 3;

var Pause = 2000;
var Speed = 10;

var ImageHeight = 100;
var ImageTop = 10;
var ImageLeft = 10;

var CurrentImage = 0;
var CurrentTop = ImageTop;

// Images
// -------
var ImgName = new Array();
ImgName[0] = "Pic1.jpg";
ImgName[1] = "Pic2.jpg";
ImgName[2] = "Pic3.jpg";


// Functions
// ----------
function ChangeImage() {
document.ImageContainer2.src = ImgName[CurrentImage];

if(CurrentImage == ImgName.length-1)
document.ImageContainer1.src = ImgName[0];
else
document.ImageContainer1.src = ImgName[CurrentImage+1];

if(++CurrentImage == ImgName.length)
CurrentImage = 0;

document.ImageContainer1.style.top = ImageTop + "px";
document.ImageContainer2.style.top = ImageTop + "px";
document.ImageContainer1.style.left = ImageLeft + "px";
document.ImageContainer2.style.left = ImageLeft + "px";

var TimerSlideDown = setTimeout("SlideDown()", Pause);
}


function SlideDown() {
if(document.ImageContainer2.height > Step) {
document.ImageContainer1.height += Step;
document.ImageContainer2.height -= Step;
CurrentTop += Step;
document.ImageContainer2.style.top = CurrentTop + "px";

var TimerSlideDown = setTimeout("SlideDown()", Speed);
}
else {
CurrentTop = ImageTop;
document.ImageContainer1.height = 0;
document.ImageContainer2.height = ImageHeight;
document.ImageContainer2.style.top = ImageTop + "px";

ChangeImage();
}
}
</script>
<style type="text/css">
<!--
A:visited {text-decoration: none;}
A:hover {text-decoration: underline;}
A:link {text-decoration: none;}
A:active {text-decoration: underline;}
-->
</style>
</HEAD>

<body onLoad=ChangeImage()>
<img name="ImageContainer1"
style="position:absolute"
width=150
height=0
border=0>

<img name="ImageContainer2"
style="position:absolute"
width=150
height=100
border=0>
</body>
</html>

pauliv

2:57 am on Mar 7, 2002 (gmt 0)

Inactive Member
Account Expired

 
 


just to add//////
I tried to change position option to relative, but it didnt help..
2:15 pm on Mar 7, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 7, 2002
posts:179
votes: 0


I use the following code
-------------------------

<%
RANDOMIZE
LowestNumber = 1
HighestNumber = 10
RandomNumber = INT((HighestNumber-LowestNumber+1)*Rnd+LowestNumber)
SELECT CASE RandomNumber
CASE "1"%>
<A HREF="link1.htm"><IMG SRC="banner1.gif" BORDER=0></A>
<%CASE "2"%>
<A HREF="link2.htm"><IMG SRC="banner2.gif" BORDER=0></A>
<%CASE "3"%>
<A HREF="link3.htm"><IMG SRC="banner3.gif" BORDER=0></A>
<%CASE "4"%>
<A HREF="link4.htm"><IMG SRC="banner4.gif" BORDER=0></A>
<%CASE "5"%>
<A HREF="link5.htm"><IMG SRC="banner5.gif" BORDER=0></A>
<%CASE "6"%>
<A HREF="link6.htm"><IMG SRC="banner6.gif" BORDER=0></A>
<%CASE "7"%>
<A HREF="link7.htm"><IMG SRC="banner7.gif" BORDER=0></A>
<%CASE "8"%>
<A HREF="link8.htm"><IMG SRC="banner8.gif" BORDER=0></A>
<%CASE "9"%>
<A HREF="link9.htm"><IMG SRC="banner9.gif" BORDER=0></A>
<%CASE "10"%>
<A HREF="link10.htm"><IMG SRC="banner10.gif" BORDER=0></A>
<%END SELECT%>
----------------------
Hope this helps