homepage Welcome to WebmasterWorld Guest from 54.204.73.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
image change with javascript
How can i do this?
pauliv

10+ Year Member



 
Msg#: 61 posted 2:14 am on Mar 7, 2002 (gmt 0)

How to make several images change one after another within the table cell?

 

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 61 posted 2:50 am on Mar 7, 2002 (gmt 0)

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

pauliv

10+ Year Member



 
Msg#: 61 posted 2:55 am on Mar 7, 2002 (gmt 0)

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

10+ Year Member



 
Msg#: 61 posted 2:57 am on Mar 7, 2002 (gmt 0)

just to add//////
I tried to change position option to relative, but it didnt help..

cfel2000

10+ Year Member



 
Msg#: 61 posted 2:15 pm on Mar 7, 2002 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved