SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict operator's Avatar
    Join Date
    Aug 2004
    Location
    Bangkok
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rotating images not even appearing, let alone rotating!

    I need some javascript help. I've been trying to fix this problem for almost 2 hours, with no luck. I have a page with a javascript dropdown menu (this works well), and today I've added a rotating image in the upper right corner, but the images won't appear.

    If you know javascript, please look this over for errors:

    Here is the javascript (getHeader.js):

    <!-- Begin
    function getHeader(){
    var how_many_photos = 7;
    var now = new Date();
    var sec = now.getSeconds();
    var photo = sec % how_many_photos;
    photo +=1;

    // ##### add new images here #######

    if (photo==1) {
    alt="Merasheen";
    banner="i/banners/photo1.gif";
    width="222";
    height="116";
    }

    if (photo==2) {
    alt="Merasheen";
    banner="i/banners/photo2.gif";
    width="222";
    height="116";
    }

    if (photo==3) {
    alt="Bishop Falls";
    banner="i/banners/photo3.gif";
    width="222";
    height="116";
    }

    if (photo==4) {
    alt="Flint Cove";
    banner="i/banners/photo4.gif";
    width="222";
    height="116";
    }

    if (photo==5) {
    alt="Cape St. Marys";
    banner="i/banners/photo5.gif";
    width="222";
    height="116";
    }

    if (photo==6) {
    alt="Great Rattling Brook";
    banner="i/banners/photo6.gif";
    width="222";
    height="116";
    }

    if (photo==7) {
    alt="";
    banner="i/banners/photo7.gif";
    width="222";
    height="116";
    }

    // ##### end images #######

    document.write('<img src=\"' + banner + '\" width=')
    document.write(width + ' height=' + height + ' ');
    document.write('alt=\"' + alt + '\" border=0>');
    }

    // End -->



    And now here is the header file (header.asp) where I try to call the function:


    <!-- DHTML QuickMenu, Copyright (c) 2001, OpenCube Inc. All Rights Reserved - www.opencube.com -->
    <script language="JavaScript1.2" src="quickmenu/sample_data.js" type="text/javascript"></script>
    <script language="JavaScript1.2" src="quickmenu/dqm_script.js" type="text/javascript"></script>
    <script language="javascript1.2" src="js/getHeader.js"></script>
    <title><%=pagetitle%></title>

    <center>
    <table width="730" border="0" cellspacing="0" cellpadding="0" bgcolor="#061B5C" class="full2">

    <tr><td>

    <table border="0" width="100%" cellpadding="0" cellspacing="0">
    <tr>
    <td width="360" background="i/top1bg.gif" align="left">
    <img src="i/top1new.gif" width="360" height="116" border="0"></td>
    <td background="i/top1bg.gif" width="100%" align="right">
    <script language="javascript">getHeader()</script>
    </td>
    </tr>
    </table>

    <table border="0" width="100%" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top" style="padding-left = 0px;"><a href="default.asp">
    <img src="quickmenu/link1.gif" width="66" height="22" border="0"></a>
    </td>

    <td valign="top">
    <img src="quickmenu/link2.gif" width="99" height="22" name="menu0" id="menu0" onmouseover="showMenu(event)" onmouseout="hideMenu(event)">
    </td>

    <td valign="top">
    <img src="quickmenu/link3.gif" width="66" height="22" name="menu1" id="menu1" onmouseover="showMenu(event)" onmouseout="hideMenu(event)">
    </td>

    <td valign="top">
    <img src="quickmenu/link4.gif" width="78" height="22" name="menu2" id="menu2" onmouseover="showMenu(event)" onmouseout="hideMenu(event)">
    </td>

    <td valign="top"><a href="contact.asp">
    <img src="quickmenu/link5.gif" width="78" height="22" border="0"></a>
    </td>

    <td valign="top">
    <img src="i/top3bg.gif" width="343" height="22">
    </td>
    </tr>
    </table>


    ad(thanks)vance if you can help!

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried you code with the js embedied and it works fine diplaying the first image dependent on the second.

    It wont rotate the image though, I have changed the script to change the image on a random number.


    PHP Code:

    <html>

    <
    head>
      <
    title></title>
    </
    head>

    <
    body>
    <
    script language="JavaScript" type="text/javascript">
    <!--

    function 
    getHeader(newphoto){
    var 
    how_many_photos 7;
    var 
    now = new Date();
    var 
    sec now.getSeconds();
    var 
    photo1 sec how_many_photos;
    photo1 +=1;

    photo=Math.floor(Math.random()*how_many_photos)+1;


    // ##### add new images here #######

    if (photo==1) {
    alt="Merasheen";
    banner="Mail.gif";
    width="222";
    height="116";
    }

    if (
    photo==2) {
    alt="Merasheen";
    banner="MouseOver.gif";
    width="222";
    height="116";
    }

    if (
    photo==3) {
    alt="Bishop Falls";
    banner="Mail.gif";
    width="222";
    height="116";
    }

    if (
    photo==4) {
    alt="Flint Cove";
    banner="MouseOver.gif";
    width="222";
    height="116";
    }

    if (
    photo==5) {
    alt="Cape St. Marys";
    banner="Mail.gif";
    width="222";
    height="116";
    }

    if (
    photo==6) {
    alt="Great Rattling Brook";
    banner="MouseOver.gif";
    width="222";
    height="116";
    }

    if (
    photo==7) {
    alt="";
    banner="Mail.gif";
    width="222";
    height="116";
    }

     if (
    newphoto){
    // ##### end images #######

      
    document.write('<img id="RotateImg" src=\"' banner '\" width=')
      
    document.write(width ' height=' height ' ');
      
    document.write('alt=\"' alt '\" border=0>');
     }

    document.getElementById('RotateImg').src=banner;
    setTimeout('getHeader(0)',1000);
    }
    //-->
    </script>

    And now here is the header file (header.asp) where I try to call the function:



    <!-- DHTML QuickMenu, Copyright (c) 2001, OpenCube Inc. All Rights Reserved - www.opencube.com -->
    <script language="JavaScript1.2" src="quickmenu/sample_data.js" type="text/javascript"></script>
    <script language="JavaScript1.2" src="quickmenu/dqm_script.js" type="text/javascript"></script>
    <script language="javascript1.2" src="js/getHeader.js"></script>
    <title><%=pagetitle%></title>

    <center>
    <table width="730" border="0" cellspacing="0" cellpadding="0" bgcolor="#061B5C" class="full2">

    <tr><td>

    <table border="0" width="100%" cellpadding="0" cellspacing="0">
    <tr>
    <td width="360" background="i/top1bg.gif" align="left">
    <img src="i/top1new.gif" width="360" height="116" border="0"></td>
    <td background="i/top1bg.gif" width="100%" align="right">
    <script language="javascript">getHeader(1)</script>
    </td>
    </tr>
    </table>

    <table border="0" width="100%" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top" style="padding-left = 0px;"><a href="default.asp">
    <img src="quickmenu/link1.gif" width="66" height="22" border="0"></a>
    </td>

    <td valign="top">
    <img src="quickmenu/link2.gif" width="99" height="22" name="menu0" id="menu0" onmouseover="showMenu(event)" onmouseout="hideMenu(event)">
    </td>

    <td valign="top">
    <img src="quickmenu/link3.gif" width="66" height="22" name="menu1" id="menu1" onmouseover="showMenu(event)" onmouseout="hideMenu(event)">
    </td>

    <td valign="top">
    <img src="quickmenu/link4.gif" width="78" height="22" name="menu2" id="menu2" onmouseover="showMenu(event)" onmouseout="hideMenu(event)">
    </td>

    <td valign="top"><a href="contact.asp">
    <img src="quickmenu/link5.gif" width="78" height="22" border="0"></a>
    </td>

    <td valign="top">
    <img src="i/top3bg.gif" width="343" height="22">
    </td>
    </tr>
    </table>

    </body>

    </html> 

  3. #3
    SitePoint Addict operator's Avatar
    Join Date
    Aug 2004
    Location
    Bangkok
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried your fix, but it didn't work. I'm thinking it may have to do with interference from the javascript navigation menu. Also, I'd prefer to have the images change as the page reloads, or as a visitor browses to a diff page within the site.

    Any other suggestions?

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm thinking it may have to do with interference from the javascript navigation menu.
    I don't see how, and vw confirmed that it doesn't.

    Any other suggestions?
    It sounds like you have the wrong path to the .js file here:

    <script language="javascript1.2" src="js/getHeader.js"></script>

    However, I get an error if I call a function that doesn't exist. Did you get any errors when you ran your page?

    Try imbedding the function in the page and see if it works. If it does, then you don't have the right path to your .js file.

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did not have any of the external jss when I tried it

    Have you tried the script I posted without the external jss???

    you will need to change the images

    perhaps your path to the images is incorrect

  6. #6
    SitePoint Addict operator's Avatar
    Join Date
    Aug 2004
    Location
    Bangkok
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, the error had something to do with the path. I had it correct, yet when I moved the images to a different folder, it worked. (maybe that folder was corrupt somehow on the server!)

    Anyway, thanks for the help, I used ASP to accomplish this after all - and the code to do this in asp was only about 4 lines long!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •