Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Menu Rollovers and Slide show won't work at the same time?

    Hi there,

    I have a page with 2 navigation menus as well as a slide show (3 separate .js files). I can get them all to work individually but not all together, at the same time.
    I looked over you FAQ section but I can't seem to figure it out.
    Any help would be hugely appreciated.
    Thank you so much.

    HTML:

    <!-- Main content -->
    <div id="content">
    <div style="text-align:center">
    <img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
    </div>

    <script type="text/javascript" src="slideshow.js"></script>
    </div>




    <!-- Site navigation menu -->
    <div id="navcontainer">
    <ul>
    <li>
    <div align="center"><img src="images/logo1.jpg" id="logo" alt="Logo" /></div>
    </li>
    <li><img src="images/buttons/teamandcorpsports1.jpg" id="teamandcorpsports" alt="Team and Corporate Sports" width="224" height="37" /></li>
    <li><img src="images/buttons/performancesports1.jpg" id="performancesports" alt="Performance Sports" width="224" height="37" /></li>
    <li><img src="images/buttons/flagsandbanners1.jpg" id="flagsandbanners" alt="Flags and Banners" width="224" height="37" /></li>
    <li><img src="images/buttons/home1.jpg" id="home" alt="Home" width="224" height="37" /></li>
    <li><img src="images/buttons/catalogues1.jpg" id="catalogues" alt="Catalogues" width="224" height="37" /></li>
    <li><img src="images/buttons/galleries1.jpg" id="galleries" alt="Galleries" width="224" height="37" /></li>
    <li><img src="images/buttons/designown1.jpg" id="designown" alt="Design your Own" width="224" height="37" /></li>


    </ul>

    </div>

    <script type="text/javascript" src="navigation.js"></script>

    <div id="footer">
    <!-- Site navigation menu - footer -->
    <div id="navcontainer_footer">
    <ul>


    <li><img src="images/buttons/dealerlogin1.jpg" id="dealerlogin" alt="Dealer Log in" width="102" height="29" /></li>
    <li><img src="images/buttons/contactus1.jpg" id="contactus" alt="Contact Us" width="102" height="29" /></li>
    <li><img src="images/buttons/dealersignup1.jpg" id="dealersignup" alt="Sign Up to be a Dealer Here" width="102" height="29" /></li>
    </ul>

    </div>

    <script type="text/javascript" src="navigation_bottom.js"></script>
    </div>
    </div>
    <!-- End Wrapper -->






    slideshow.js

    var pause = 3000; // interval, in milliseconds, between transitions
    var i = 0; // image counter
    var pic = document.getElementById("pic"); // the <img> element in the HTML file

    // define an array of images
    var imgs = new Array("images/slideshow/slideshow1.jpg", "images/slideshow/slideshow2.jpg", "images/slideshow/slideshow3.jpg", "images/slideshow/slideshow4.jpg", "images/slideshow/slideshow5.jpg", "images/slideshow/slideshow6.jpg", "images/slideshow/slideshow7.jpg" );

    // preload the images
    for (var j = 0; j < imgs.length; j++)
    {
    var obj = new Image();
    obj.src = imgs[j];
    }

    // rotates between the images in the "imgs" array
    function rotate()
    {
    pic.src = imgs[i];
    if (i === (imgs.length -1))
    {
    i = 0;
    }
    else
    {
    i++;
    }

    setTimeout("rotate()", pause);
    }

    window.onload = rotate;


    navigation_bottom.js
    // define an array of images
    var navImgs = new Array("images/buttons/dealerlogin1.jpg", "images/buttons/contactus1.jpg", "images/buttons/dealersignup1.jpg");


    // preload the images by iterating the array
    for (var i = 0; i < navImgs.length; i++)
    {
    var obj = new Image();
    obj.src = navImgs[i];
    }

    // initialize the onmouseover and onmouseout events
    function init()
    {
    // get all the <img> tags in the HTML document as an array
    var navContainer = document.getElementById("navcontainer_footer");
    var imgArray = navContainer.getElementsByTagName("img");
    // var imgArray = document.getElementsByTagName("img");
    // loop through the array and bind the onmouseout and onmouseover events
    for (var i = 0; i < imgArray.length; i++)
    {
    var img = imgArray[i];
    img.onmouseover = doMouseOver;
    img.onmouseout = doMouseOut;
    }
    }

    // define the function for the onmouseover event
    function doMouseOver(e)
    {
    var img;

    if (!e) // IE
    {
    e = window.event;
    // get the <img> element for IE that triggered the event
    img = e.srcElement;
    }
    else
    {
    // get the <img> element for FF that triggered the event
    img = e.target;
    }

    // extract the digit only from the "id" attribute value and concatenate it
    // to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
    var id = img.id;
    img.src = "images/buttons/" + id + ".jpg";
    //img.src = "images/pic" + id.substring("pic".length) + ".jpg";
    }

    // define the function for the onmouseout event
    function doMouseOut(e)
    {
    var img;

    if (!e) // IE
    {
    e = window.event;
    // get the <img> element for IE that triggered the event
    img = e.srcElement;
    }
    else
    {
    // get the <img> element for FF that triggered the event
    img = e.target;
    }

    //img.src = "images/button_home1.jpg";
    var id = img.id;
    img.src = "images/buttons/" + id + "1.jpg";
    }

    // call the "init" function to initialize the event binding
    //window.onload = init;


    navigation.js

    // define an array of images
    var navImgs = new Array("images/buttons/logo1.jpg", "images/buttons/teamandcorpsports1.jpg", "images/buttons/performancesports1.jpg", "images/buttons/flagsandbanners1.jpg", "images/buttons/home1.jpg", "images/buttons/catalogues1.jpg", "images/buttons/galleries1.jpg", "images/buttons/designown1.jpg");

    // preload the images by iterating the array
    for (var i = 0; i < navImgs.length; i++)
    {
    var obj = new Image();
    obj.src = navImgs[i];
    }

    // initialize the onmouseover and onmouseout events
    function init()
    {
    // get all the <img> tags in the HTML document as an array
    var navContainer = document.getElementById("navcontainer");
    var imgArray = navContainer.getElementsByTagName("img");
    // var imgArray = document.getElementsByTagName("img");
    // loop through the array and bind the onmouseout and onmouseover events
    for (var i = 0; i < imgArray.length; i++)
    {
    var img = imgArray[i];
    img.onmouseover = doMouseOver;
    img.onmouseout = doMouseOut;
    }
    }

    // define the function for the onmouseover event
    function doMouseOver(e)
    {
    var img;

    if (!e) // IE
    {
    e = window.event;
    // get the <img> element for IE that triggered the event
    img = e.srcElement;
    }
    else
    {
    // get the <img> element for FF that triggered the event
    img = e.target;
    }

    // extract the digit only from the "id" attribute value and concatenate it
    // to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
    var id = img.id;
    img.src = "images/buttons/" + id + ".jpg";
    //img.src = "images/pic" + id.substring("pic".length) + ".jpg";
    }

    // define the function for the onmouseout event
    function doMouseOut(e)
    {
    var img;

    if (!e) // IE
    {
    e = window.event;
    // get the <img> element for IE that triggered the event
    img = e.srcElement;
    }
    else
    {
    // get the <img> element for FF that triggered the event
    img = e.target;
    }

    //img.src = "images/button_home1.jpg";
    var id = img.id;
    img.src = "images/buttons/" + id + "1.jpg";
    }

    // call the "init" function to initialize the event binding
    //window.onload = init;



  • #2
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    I am in no way an expert on Javascript, but is it appropriate to have doMouseOver() and doMouseOut() defined three times? I have been under the impression that Javascript's scope crosses files.

    If these functions are identical, I would remove their definition from two of the files, and if they are not I would use:

    Code:
    img.onmouseover = function ...
    That's all I've got, so if this does not fix it, it's beyond my understanding of Javascript.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much M.Jackson.
    I thought maybe because I had defined doMouseOver() and doMouseOut() in separate .js files with different arrays and ids, I would be able to do more than one? But maybe I am incorrect?


  •  

    Posting Permissions

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