SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Sep 2003
    Location
    pa
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation 3 scripts on one page??

    I have 2 javascripts on one page and need to add sounds to this page as well....client would like buttons to make a sound when hovered over. I have the sounds in .wav format, but already the page will not display the present 2 scripts - one script is the text following mouse, which works, the other script is for the links to change color...worked until i included the mouse/text script....and, I need to add the sound to each button...i hope this makes sense...the page is http://angelom.web.aplus.net/
    Thank you so much!

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    USA
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .
    2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
    2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
    2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

  3. #3
    ********* Janitor levik's Avatar
    Join Date
    Jan 2003
    Location
    New York
    Posts
    885
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem with pasting in a bunch of 3rd party scripts is generally that they can define functions with the same name (which causes JS to crap out).

    That's something I would look out for.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This line is in the Ripple code:
    Code:
    window.onload=ripple;
    And here's the opening Body tag:
    HTML Code:
    <BODY BGCOLOR=#000000  marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 ONLOAD="preloadImages();">
    You need to reduce it to using only one onload function. For example:
    Code:
    window.onload = pgOnLoad; // instead of 'window.onload=ripple;'
    function pgOnLoad()
    {
      preloadImages();
      ripple();
    }
    ...and remove the onload assignment in the body tag:
    HTML Code:
    <BODY BGCOLOR=#000000  marginwidth=0 marginheight=0 leftmargin=0 topmargin=0>
    IMHO: The text ripple is a nice effect, but to be honest it detracts from such a well-designed page.

    Great work!

  5. #5
    SitePoint Member
    Join Date
    Sep 2003
    Location
    pa
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you sooo much!!
    I agree about the ripple text being a bit much...Once i added the sounds to the buttons i lost both the other effects...i wouldn't mind keeping the rollover change...any way i can do it??
    Again thank you for your amazing expertise!

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome, rebekah

    I don't see any rollover code, so for now I'll assume you have your own and can insert it in the correct places below.

    As before, the idea is to combine two actions (sound and image change) in one event listener function.
    Code:
    <html>
    <head>
    <script type='text/javascript'>
    function mOver(n)
    {
      playSound(n);
      // set mouseover image n
    }
    function mOut(n)
    {
      stopSound(n);
      // set mouseout image n
    }
    </script>
    </head>
    <body>
    
    <A HREF="news.html" onmouseover="mOver(0)" onmouseout="mOut(0)"><IMG NAME="index_news" SRC="images/index_news.jpg" WIDTH=194 HEIGHT=43 BORDER=0 alt="news"></A>
    
    </body>
    </html>

  7. #7
    SitePoint Member
    Join Date
    Sep 2003
    Location
    pa
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    o mike...js is confusing to me....i'm just not clear how to tweak...i re-uploaded the code with rollovers...maybe you can view it now??thank you again....

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi rebekah,

    It may be later tonight before I can look at it again.

    ttyl

  9. #9
    SitePoint Member
    Join Date
    Sep 2003
    Location
    pa
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no problem!
    at your convenience for sure!!

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi rebekah,

    I'm suggesting some different rollover code - there wasn't anything wrong with your code, but the following is easier to index by number. I admit that I haven't tested it, but it should be pretty close. I took advantage of the excellent naming convention you're using:

    outImgUrl = imgPath + imgEleName + ".jpg";

    overImgUrl = imgPath + imgEleName + "-over.jpg";

    The following needs your sound code added to it. Don't let the sound code assign a function to "window.onload". Any initialization function needed by the sound code should be called where I've noted below. Notice how a number is associated with each button/sound pair.
    Code:
    <html>
    <head>
    <script type='text/javascript'>
    
    var imgPath = "images/";
    var pgImgs = new Array();
    
    window.onload = function()
    {
      preloadImages();
      // call sound code initialization function here
    }
    
    function mOver(n)
    {
      pgImgs[n].over();
      playSound(n);
    }
    function mOut(n)
    {
      pgImgs[n].out();
      stopSound(n);
    }
    
    function pgImage(imgEleName)
    {
      this.imgEleObj = document.images[imgEleName];
      this.outImgUrl = imgPath + imgEleName + ".jpg";
      this.ovrImgObj = new Image();
      this.ovrImgObj.src = imgPath + imgEleName + "-over.jpg";
      this.over = function() { if (this.ovrImgObj.complete) this.imgEleObj.src = this.ovrImgObj.src; }
      this.out = function() { if (this.imgEleObj.complete) this.imgEleObj.src = this.outImgUrl; }
    }
    
    function preloadImages()
    {
      if (document.images) {
        pgImgs[0] = new pgImage("index_news");
        pgImgs[1] = new pgImage("index_schedule");
        pgImgs[2] = new pgImage("index_presskit");
        pgImgs[3] = new pgImage("index_scrapbook");
        pgImgs[4] = new pgImage("index_mailinglist");
        pgImgs[5] = new pgImage("index_contact");
      }
    }
    
    // insert sound code here
    
    </script>
    </head>
    <body>
    
    <A HREF="news.html" onmouseover="mOver(0)" onmouseout="mOut(0)">
      <IMG NAME="index_news" SRC="images/index_news.jpg"
        WIDTH=194 HEIGHT=43 BORDER=0 alt="news"></A>
    
    <A HREF="schedule.html" onmouseover="mOver(1)" onmouseout="mOut(1)">
      <IMG NAME="index_schedule" SRC="images/index_schedule.jpg"
        WIDTH=194 HEIGHT=44 BORDER=0 alt="schedule"></A>
      
    <A HREF="presskit.html" onmouseover="mOver(2)" onmouseout="mOut(2)">
      <IMG NAME="index_presskit" SRC="images/index_presskit.jpg"
        WIDTH=194 HEIGHT=45 BORDER=0 alt="press kit"></A>
    
    etc...
    
    </body>
    </html>

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't resist playing with this a little more
    Code:
    <html>
    <head>
    <title>Object-Oriented Image Roll-over Demo</title>
    
    <script type='text/javascript'>
    
    /*
      This demonstrates how to use xImageManager objects.
      In this demo we have two sets of images, each in different
      directories and each with different filename extensions.
    */  
    
    var btnImgs = new xImageManager('images/', '-over', '.jpg');
    
    var adImgs = new xImageManager('ads/images/', '_hvr', '.gif');
    
    window.onload = function()
    {
      // pass the img element names to the load() method
    
      btnImgs.load(
        'index_news',        // 0
        'index_schedule',    // 1
        'index_presskit',    // 2
        'index_scrapbook',   // 3
        'index_mailinglist', // 4
        'index_contact');    // 5
    
      adImgs.load(
        'amazon1', // 0
        'amazon2', // 1
        'ppc1',    // 2
        'ppc2');   // 3
    
      // other initializations
    }
    
    // These over/out functions are only required if
    // you need more than one action per over/out event.
    
    function btnOver(n)
    {
      btnImgs.over(n);
      // other btn mouseover actions
    }
    function btnOut(n)
    {
      btnImgs.out(n);
      // other btn mouseout actions
    }
    
    function adOver(n)
    {
      adImgs.over(n);
      // other ad mouseover actions
    }
    function adOut(n)
    {
      adImgs.out(n);
      // other ad mouseout actions
    }
    
    /***
      xImage system code (should be in a separate js file)
    
      The load method can be called before, during, or after the window onload event.
      
      Image Filenames:
        out img = path + imgEleName + fileExt
        over img = path + imgEleName + ovrSuffix + fileExt
    ***/  
    
    function xImageManager(path, ovrSuffix, fileExt) // object prototype
    {
      this.p = path;
      this.x = fileExt;
      this.s = ovrSuffix;
      this.a = new Array();
      this.over = function(n) { this.a[n].over() }
      this.out = function(n) { this.a[n].out() }
      this.load = function() { // pass img ele names as args
        for (var i=0; i<arguments.length; ++i) {
          this.a[this.a.length] = new xImage(arguments[i], this.p, this.s, this.x);
        }
      }
    }  
    
    function xImage(imgEleName, path, ovrSuffix, fileExt) // object prototype
    {
      this.eleName = imgEleName;
      this.outUrl = path + imgEleName + fileExt;
      this.ovrObj = new Image();
      this.ovrObj.src = path + imgEleName + ovrSuffix + fileExt;
      this.over = function() {
        var eleObj = document.images ? document.images[this.eleName] : null;
        if (eleObj && this.ovrObj.complete) eleObj.src = this.ovrObj.src;
      }
      this.out = function() {
        var eleObj = document.images ? document.images[this.eleName] : null;
        if (eleObj && eleObj.complete) eleObj.src = this.outUrl;
      }
    }
    
    </script>
    </head>
    <body>
    
    <a href='news.html' onmouseover='btnOver(0)' onmouseout='btnOut(0)'>
      <img name='index_news' src='images/index_news.jpg'></a>
    
    <a href='schedule.html' onmouseover='btnOver(1)' onmouseout='btnOut(1)'>
      <img name='index_schedule' src='images/index_schedule.jpg'></a>
    
    <a href='presskit.html' onmouseover='btnOver(2)' onmouseout='btnOut(2)'>
      <img name='index_presskit' src='images/index_presskit.jpg'></a>
    
    etc...
    
    <a href='adUrl' onmouseover='adOver(0)' onmouseout='adOut(0)'>
      <img name='amazon1' src='ads/images/amazon1.gif'></a>
    
    <a href='adUrl' onmouseover='adOver(1)' onmouseout='adOut(1)'>
      <img name='amazon2' src='ads/images/amazon2.gif'></a>
    
    <a href='adUrl' onmouseover='adOver(2)' onmouseout='adOut(2)'>
      <img name='ppc1' src='ads/images/ppc1.gif'></a>
    
    etc...
    
    </body>
    </html>

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still can't stop playing with it (but I haven't tested it yet ;)).

    I did a little better this time using the X library...
    Code:
    /** xImgRollSetup
      Can not be called before the window onload event.
      Pass image IDs starting with 4th argument.
      Assumes this image file naming convention:
        out img = path + imgEleId + fileExt
        over img = path + imgEleId + ovrSuffix + fileExt
    */  
    
    function xImgRollSetup(path, ovrSuffix, fileExt) 
    {
      for (var i=3; i<arguments.length; ++i) {
        xImgRollBind(arguments[i], path, ovrSuffix, fileExt);
      }
    }  
    
    function xImgRollBind(imgEleId, path, ovrSuffix, fileExt)
    {
      var ele = xGetElementById(imgEleId);
      if (ele) {
        ele.xOutUrl = path + imgEleId + fileExt;
        ele.xOvrObj = new Image();
        ele.xOvrObj.src = path + imgEleId + ovrSuffix + fileExt;
        xAddEventListener(ele, 'mouseout', xImgRollListener, false);
        xAddEventListener(ele, 'mouseover', xImgRollListener, false);
      }
    }
    
    function xImgRollListener(e)
    {
      var evt = new xEvent(e);
      var ele = evt.target;
      if (ele && ele.xOvrObj) {
        if (evt.type == 'mouseout') {
          ele.src = ele.xOutUrl;
        }
        else if (ele.xOvrObj.complete) {
          ele.src = ele.xOvrObj.src;
        }
      }
    }
    Example usage...
    Code:
    <html>
    <head>
    <script type='text/javascript' src='../x.js'></script>
    <script type='text/javascript' src='../x_img.js'></script>
    <script type='text/javascript'>
    window.onload = function()
    {
      xImgRollSetup(
        '../images/', // path
        '-over',      // ovrSuffix
        '.jpg',       // fileExt
        'xlib',       // img IDs
        'xlibDemos',
        'xlibDocs');
    
      xImgRollSetup(
        '../../images/', // path
        '_hvr',          // ovrSuffix
        '.gif',          // fileExt
        'cbe',           // img IDs
        'cbeDemos',
        'cbeDocs');
    }
    </script>
    </head>
    <body>
    
    <a href=''><img id='xlib' src='' /></a>
    <a href=''><img id='xlibDemos' src='' /></a>
    <a href=''><img id='xlibDocs' src='' /></a>
    
    <a href=''><img id='cbe' src='' /></a>
    <a href=''><img id='cbeDemos' src='' /></a>
    <a href=''><img id='cbeDocs' src='' /></a>
    
    </body>
    </html>
    Last edited by MikeFoster; Nov 6, 2003 at 01:26.

  13. #13
    SitePoint Member
    Join Date
    Dec 2002
    Location
    Pennsylvania
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike,
    Thank you so much for all the time you put in this!!!
    I honestly have been a copy and paster when it comes to js...i just don't get the programming language....this peanut brain of mine....anyway, again, thank you for allll your expertise and help.
    I do now have 2 js on the page!! The music files were just too large to use i think.

  14. #14
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    beka, what media player are you relying on?
    If your using windows media player, you can use their own compression. Open the windows sound recorder in accesories/entertainment. load your sound files and resave them using windows compression .You'll have to give it a few tries, but you should be able to get them lower than mp3 and still good quality.
    my site at www.unitingrhythms.co.uk/drums/rhythms.html uses 12 sounds, each one only 3kb. I created them with sound-forge and saved them using windows sound recorder. Handy with WMP.......
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  15. #15
    SitePoint Member
    Join Date
    Dec 2002
    Location
    Pennsylvania
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi mark,
    i tried what you suggested..windows sound recorder in accesories/entertainment..when i tried to open the sound it said the .wav file(s) there was an error stating that the file was corrupt..any thoughts??
    thanks, beka


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
  •