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 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Play Audio AND Swap Image on MouseOver

    I want an image to swap over on mouseover and revert on mouseout, which I can do, but I also want a small audio file to play aswell (there are 7 links on a navigation bar I want to do this).

    I'm trying to get the script used here to work along side the code located at the bottom of this post (automatically created with Dreamweaver MX) and both will work seperately, but I don't know how to get them to work at the same time. Any ideas?

    Code:
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    And if you know how to do that and feel like helping me even more, have a look at my related problem here. Oh go on... please.

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Location
    Look behind you...
    Posts
    208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Srry but i don't know how to do the sound part i do know how to do the image part.

    [code]
    <script>
    function swapon1()
    {
    document.img1.src="img/nav1r.gif
    }
    function swapoff1()
    {
    document.img1.src="img/nav1.gif";
    }
    </script>
    [code]
    The red means that thats where your picture is located on your server.
    The blue means that thats your swapon and off number, like that will be for navi 1, then the second navigation will be number 2....etc.

    After you are done with all of your navigations you then enter these lines of code (but to your settings).

    Code:
    <table width="780" border="0" cellspacing="0" cellpadding="0">
    <tr><td height="40" background="img/fon03.gif">
    The green is the location of the place of the navi background located on your server.
    Make sure your set everything to your needs.

    After that you have to do the "onclick" function.

    Code:
    <a onclick="return true" onMouseOver="swapon1()" onMouseOut="swapoff1()" href="navi link 1"><img src="img/nav1.gif" width ="128" height="40" border="0" name="img1"></a><img src="img/separator.gif" width="2" height="40">
    Everything in blue is what you have to change to your need but everything in black you leave it the way it is.


    Ok, maybe you are still a little confused

    Lets say for example i had 2 Navigation links that i wanted to do the swapon/off function, then you would use this type of code:

    Then what i would be is put this code in the body tag of your html, where ever you navigation is.

    Code:
    <script>
    function swapon1()
     {
          document.img1.src="img/nav1r.gif";
     }
    function swapoff1()
     {
          document.img1.src="img/nav1.gif";
     }
    </script>
    <script>
    function swapon2()
     {
          document.img2.src="img/nav2r.gif";
     }
    function swapoff2()
     {
          document.img2.src="img/nav2.gif";
     }
    </script>
    
    
    <table width="780" border="0" cellspacing="0" cellpadding="0">
    <tr><td height="40" background="img/fon03.gif">
              <a onclick="return true" onMouseOver="swapon1()" onMouseOut="swapoff1()" href="page.html"><img src="img/nav1.gif" width ="128" height="40" border="0" name="img1"></a><img src="img/separator.gif" width="2" height="40"><a onclick="return true" onMouseOver="swapon2()" onMouseOut="swapoff2()" href="page.html"><img src="img/nav2.gif" width="128" height="40" border="0" name="img2"></a><img src="img/separator.gif" width="2" height="40">
    </table>

    Hope that helps!
    Web Tool Boy!
    - Domain information checker, dropping domains checker, + more.
    Domain Name Chat Forums - DNCForums.com
    - Get 50 points closer to a FREE domain name or a FREE rapidshare account!
    Live It My Way! - Lifestyle Forums
    - Enjoy your life, talk about interesting topics, get coupons!


  •  

    Posting Permissions

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