Welcome to WebmasterWorld Guest from 54.205.115.177

Forum Moderators: open

Message Too Old, No Replies

image change with javascript

How can i do this?

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

10+ Year Member



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

WebmasterWorld Senior Member 10+ Year Member



Do you mean on an event or as a rotating banner?
2:55 am on Mar 7, 2002 (gmt 0)

10+ Year Member



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>
2:57 am on Mar 7, 2002 (gmt 0)

10+ Year Member



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

10+ Year Member



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