Karla77
asked on
rotating image in javascript
I'm trying to get a background image to rotate along with other images in asp.net. The other images are rotating just fine but I cant get the background to do anything. I change the .src to .background and now nothing is rotating. The ChangingPix and SearchChangingPix work great but the MainChangingPix will not change. My code is below. I'm having a really hard time finding anything on google. Please help.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var timeDelay = 20; // change delay time in seconds
var Pix = new Array
("./Images/HomeHead_04.jpg "
,"./Images/DepartmentsHead _04.jpg"
);
var MainPix = new Array
("./Images/HomeHead_02.jpg "
,"./Images/DepartmentsHead _02.jpg"
);
var SearchPix = new Array
("./Images/HomeHead_03.jpg "
,"./Images/DepartmentsHead _03.jpg"
);
var howMany = Pix.length;
timeDelay *= 200;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
var MainPicCurrent = new Image();
MainPicCurrent.src = MainPix[PicCurrentNum];
var SearchPicCurrent = new Image();
SearchPicCurrent.src = SearchPix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].sr c = PicCurrent.src;
MainPicCurrent.src = MainPix[PicCurrentNum];
document["MainChangingPix" ].src = MainPicCurrent.src;
SearchPicCurrent.src = SearchPix[PicCurrentNum];
document["SearchChangingPi x"].src = SearchPicCurrent.src;
}
// End -->
</script>
<link rel="stylesheet" href="../HeaderMenu.css">
<body onload="startPix()">
<asp:Table ID="tblHeader" Runat="server" Width="605" Height="175" CellPadding="0" CellSpacing="0">
<asp:TableRow>
<asp:TableCell ColumnSpan=2>
<asp:Image ID="imgHeader1" Runat="server" ImageUrl="../Images/Depart mentsHeade r_01.jpg"> </asp:Imag e>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell RowSpan="2" HorizontalAlign=Right>
<table runat="server" align=right width=552px height=159px name="MainChangingPix" background="./Images/Depar tmentsHead _02.jpg">
<tr>
<td valign=top align=center width=96>
<asp:HyperLink ID="hlHome" Runat="server" NavigateUrl="../Default.as px">Home</ asp:HyperL ink>
</td>
<td valign=top>
|
</td>
<td valign=top align=center width=126>
<asp:HyperLink ID="hlContact" Runat="server" NavigateUrl="../Admin/Cont act.aspx"> Contact</a sp:HyperLi nk>
</td>
<td valign=top>
|
</td>
<td valign=top width=78 align=center>
Search
</td>
<td valign=top width=247 align=center>
<asp:TextBox ID="txtSearch" Runat="server" Width="205"></asp:TextBox>
</td>
</tr>
</table>
</asp:TableCell>
<asp:TableCell Width="59" Height="34">
<img src="../Images/Departments Head_03.jp g" name="SearchChangingPix" runat="server" border="0"
ID="Img2">
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<img name="ChangingPix" runat="server" src="../Images/Departments Head_04.jp g" ID="Img1">
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var timeDelay = 20; // change delay time in seconds
var Pix = new Array
("./Images/HomeHead_04.jpg
,"./Images/DepartmentsHead
);
var MainPix = new Array
("./Images/HomeHead_02.jpg
,"./Images/DepartmentsHead
);
var SearchPix = new Array
("./Images/HomeHead_03.jpg
,"./Images/DepartmentsHead
);
var howMany = Pix.length;
timeDelay *= 200;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
var MainPicCurrent = new Image();
MainPicCurrent.src = MainPix[PicCurrentNum];
var SearchPicCurrent = new Image();
SearchPicCurrent.src = SearchPix[PicCurrentNum];
function startPix() {
setInterval("slideshow()",
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].sr
MainPicCurrent.src = MainPix[PicCurrentNum];
document["MainChangingPix"
SearchPicCurrent.src = SearchPix[PicCurrentNum];
document["SearchChangingPi
}
// End -->
</script>
<link rel="stylesheet" href="../HeaderMenu.css">
<body onload="startPix()">
<asp:Table ID="tblHeader" Runat="server" Width="605" Height="175" CellPadding="0" CellSpacing="0">
<asp:TableRow>
<asp:TableCell ColumnSpan=2>
<asp:Image ID="imgHeader1" Runat="server" ImageUrl="../Images/Depart
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell RowSpan="2" HorizontalAlign=Right>
<table runat="server" align=right width=552px height=159px name="MainChangingPix" background="./Images/Depar
<tr>
<td valign=top align=center width=96>
<asp:HyperLink ID="hlHome" Runat="server" NavigateUrl="../Default.as
</td>
<td valign=top>
|
</td>
<td valign=top align=center width=126>
<asp:HyperLink ID="hlContact" Runat="server" NavigateUrl="../Admin/Cont
</td>
<td valign=top>
|
</td>
<td valign=top width=78 align=center>
Search
</td>
<td valign=top width=247 align=center>
<asp:TextBox ID="txtSearch" Runat="server" Width="205"></asp:TextBox>
</td>
</tr>
</table>
</asp:TableCell>
<asp:TableCell Width="59" Height="34">
<img src="../Images/Departments
ID="Img2">
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<img name="ChangingPix" runat="server" src="../Images/Departments
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</body>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
<HEAD>
<style type="text/css">
IMG.x { Z-INDEX: -1; LEFT: 195px; POSITION: absolute; TOP: 0px }
.tbox { LEFT: 515px; POSITION: absolute; TOP: 17px }
A.HomeMainLinks { FONT-WEIGHT: bold; FONT-SIZE: 10pt; LEFT: 220px; COLOR: #ebe5d1; FONT-FAMILY: verdana; POSITION: absolute; TOP: 20px; TEXT-DECORATION: none }
A.ContactMainLinks { FONT-WEIGHT: bold; FONT-SIZE: 10pt; LEFT: 320px; COLOR: #ebe5d1; FONT-FAMILY: verdana; POSITION: absolute; TOP: 20px; TEXT-DECORATION: none }
A.SearchMainLinks { FONT-WEIGHT: bold; FONT-SIZE: 10pt; LEFT: 430px; COLOR: #ebe5d1; FONT-FAMILY: verdana; POSITION: absolute; TOP: 20px; TEXT-DECORATION: none }
</style>
<SCRIPT language="JavaScript">
<!-- Original: D. Keith Higgs (dkh2@po.cwru.edu) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var timeDelay = 20; // change delay time in seconds
var Pix = new Array
("../HeaderImages/PublicSe
,"../HeaderImages/PublicSe
);
var howMany = Pix.length;
timeDelay *= 200;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()",
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].sr
function make_blank()
{
document.form1.user.value=
}
}
// End -->
</SCRIPT>
<LINK href="../HeaderMenu.css" rel="stylesheet">
</HEAD>
<body onload="startPix()">
<asp:Table ID="tblTopHeader" Runat="server" Width="605" Height="174">
<asp:TableRow>
<asp:TableCell>
<form id=form1 name=form1 method=post>
<img class="x" src="../HeaderImages/Publi
<a href="../Default.aspx" class="HomeMainLinks">Home
Contact |</a> <a href="../Admin/Search.aspx
Search </a>
</form>
</asp:TableCell>
</asp:TableRow>
</asp:Table>