Link to home
Start Free TrialLog in
Avatar of Karla77
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"].src = PicCurrent.src;

MainPicCurrent.src = MainPix[PicCurrentNum];
document["MainChangingPix"].src = MainPicCurrent.src;

SearchPicCurrent.src = SearchPix[PicCurrentNum];
document["SearchChangingPix"].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/DepartmentsHeader_01.jpg"></asp:Image>
                  </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/DepartmentsHead_02.jpg">
                              <tr>
                                    <td valign=top align=center width=96>
                                          <asp:HyperLink ID="hlHome" Runat="server" NavigateUrl="../Default.aspx">Home</asp:HyperLink>
                                    </td>
                                    <td valign=top>
                                          |
                                    </td>
                                    <td valign=top align=center width=126>
                                          <asp:HyperLink ID="hlContact" Runat="server" NavigateUrl="../Admin/Contact.aspx">Contact</asp:HyperLink>
                                    </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/DepartmentsHead_03.jpg" name="SearchChangingPix" runat="server" border="0"
                                    ID="Img2">
                  </asp:TableCell>
            </asp:TableRow>
            <asp:TableRow>
                  <asp:TableCell>
                        <img name="ChangingPix" runat="server" src="../Images/DepartmentsHead_04.jpg" ID="Img1">
                  </asp:TableCell>
            </asp:TableRow>
          </asp:Table>
</body>
ASKER CERTIFIED SOLUTION
Avatar of the7thchakra
the7thchakra
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Karla77
Karla77

ASKER

Here the solution I used and it worked:
<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/PublicService/Header7.gif"
,"../HeaderImages/PublicService/Header14.gif"

);

var howMany = Pix.length;
timeDelay *= 200;
var PicCurrentNum = 0;

var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];


function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;

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/PublicService/Header14.gif" name="ChangingPix"> <input type="text" name="user" class="tbox" size="30" value="Enter Search Phrase" onfocus=make_blank();>
                        <a href="../Default.aspx" class="HomeMainLinks">Home &nbsp; &nbsp; |</a> <a href="../Admin/Contact.aspx" class="ContactMainLinks">
                              Contact &nbsp; &nbsp; |</a> <a href="../Admin/Search.aspx" class="SearchMainLinks">
                              Search </a>
                        </form>
                  </asp:TableCell>
            </asp:TableRow>
      </asp:Table>