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 14 of 14
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    OnMouseOver does not work in IE

    Hi all,

    This is my first post, Self Learned new programmer here :o)

    Here's what I am having problem with:

    1) OnMouseOver is working well on Chrome, but does not do anything on IE. What am I doing wrong?

    2) I want to put sound on OnMouseOver. I tried using different examples, but no luck. Can you help me with the code?

    Here's the full code just in case:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- saved from url=(0014)about:internet -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">td img {display: block;}</style>
    <!--Fireworks CS5 Dreamweaver CS5 target.  Created Fri Nov 19 23:13:18 GMT-0500 (Eastern Standard Time) 2010-->
    
    <script language="JavaScript">
    <!-- Hide from old browsers
    
    
    if (navigator.appVersion.indexOf("2.") != -1){
    	check = false;
    	}
    if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){
    	check = false;
    	}
    else {
    	check = true;
    	}
    
    image1= new Image();
    image1.src = "img/index_r8_c4.gif";
    image1on = new Image();
    image1on.src = "img/index_r8_c4_RED.gif";
    
    image2= new Image();
    image2.src = "img/index_r4_c14.gif";
    image2on = new Image();
    image2on.src = "img/index_r4_c14_RED.gif";
    
    function imageon(name)   {
            document[name].src = eval(name + "on.src");
    }
    function imageoff(name)  {
            document[name].src = eval(name + ".src");
    }
    
    function on(name)  {
            if (check == true){
    	imageon(name);
    	}
    }
    function off(name)  {
            if (check == true){
    	imageoff(name);
    	}
    }
    // -->
    </script>
    
    
    </head>
    
    <body background="img/background.jpg">
    
    <table border="0" cellpadding="0" cellspacing="0" width="1025" align="center">
    <!-- fwtable fwsrc="main v1.png" fwpage="Page 1" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "154491994" fwnested="0" -->
      <tr>
       <td><a href="OurPastWork.htm" onmouseover="on('image1');" onmouseout="off('image1')">   
       <img name="image1" src="img/index_r8_c4.gif" width="279" height="45" border="0" id="index_r8_c4" alt="" /></a></td>
       
       <td><a href="OurExperience.htm" onmouseover="on('image2');" onmouseout="off('image2')">
       <img name="image2" src="img/index_r4_c14.gif" width="186" height="50" border="0" id="index_r4_c14" alt="" /></a></td>
       
      </tr>
       
    </table>
    </body>
    </html>
    Thanks in advance

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    Well, for starters, you are using code that was designed to be used with the browsers available circa 1997 or 1998, at the latest.

    The code is so old it has mold on it.

    Even back then, though, the accepted way to access images by name was
    Code:
        document.images[name]
    and *NOT* simply
    Code:
        document[name]
    Today, you really should just stop using names, altogether, and us id's.

    It's almost hilarious that code as old as that would be combined with "xhtml1-transitional.dtd" (which didn't exist when that code was written).

    K.I.S.S.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- saved from url=(0014)about:internet -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    td img {display: block;}
    </style>
    <script type="text/javascript">
    
    // you only need to pre-load the images that aren't already in the page:
    image1on = new Image();
    image1on.src = "img/index_r8_c4_RED.gif";
    image2on = new Image();
    image2on.src = "img/index_r4_c14_RED.gif";
    
    function on(image)  {
        image.src = image.src.replace(/\.gif/,"_RED.gif");
    }
    function on(image)  {
        image.src = image.src.replace(/\_RED.gif/,".gif");
    }
    </script>
    
    
    </head>
    
    <body background="img/background.jpg">
    
    <table border="0" cellpadding="0" cellspacing="0" width="1025" align="center">
    <!-- fwtable fwsrc="main v1.png" fwpage="Page 1" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "154491994" fwnested="0" -->
      <tr>
       <td><a href="OurPastWork.htm">   
       <img src="img/index_r8_c4.gif" width="279" height="45" border="0" alt="" 
             onmouseover="on(this);" onmouseout="off(this)" /></a></td>
       
       <td><a href="OurExperience.htm">
       <img src="img/index_r4_c14.gif" width="186" height="50" border="0" alt="" 
             onmouseover="on(this);" onmouseout="off(this)" /></a></td>
       
      </tr>
       
    </table>
    </body>
    </html>
    Of course, it's hard to blame you, at all. It's just the dreaded obsolete stuff we expect from DreamWeaver (which we variously call "NightmareWeaver" or [my favorite]"DreadWhacker").
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    datop123 (12-06-2010)

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Old Pedant, thank you a lot. Your help is greatly appreciated )

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Can you also help me to put sound on OnMouseOver?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    Code:
    <script type="text/javascript">
    
    // you only need to pre-load the images that aren't already in the page:
    image1on = new Image();
    image1on.src = "img/index_r8_c4_RED.gif";
    image2on = new Image();
    image2on.src = "img/index_r4_c14_RED.gif";
    
    function on(image)  {
        image.src = image.src.replace(/\.gif/,"_RED.gif");
        var hs = document.getElementById("hidesound");
        var url = "...path to the sound file you want to play ...";
        hs.innerHTML = '<embed src="' + url + '" hidden="true" autostart="true" loop="false" />';
    }
    
    }
    function off(image)  {
        image.src = image.src.replace(/\_RED.gif/,".gif");
    }
    </script>
    </head>
    <body>
    <!-- the following span can go anywhere on the page (very bottom is good place)-->
    <span id="hidesound"></span>
    
    ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    datop123 (12-06-2010)

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It works great, thanks again

  • #7
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I am having another problem with IE.

    1) include other website is working well on Chrome, but does not do anything on IE. What am I doing wrong?

    Can you give me a better code?

    Here's the code I am having problems with:

    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="1025" align="center">
    <!-- fwtable fwsrc="main v1.png" fwpage="Page 1" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "154491994" fwnested="0" -->
      <tr>
       <td>   
       
       <style type="text/css">
    /*<![CDATA[*/
    
    
    object {
    width: 100%;
    max-width: 770px;
    height: 480px;
    overflow: auto;
    }
    
    #div1 {
    
    width: 100%;
    max-width: 770px;
    height: 480px;
    -moz-border-radius: 10px;
    }
    
    .ctr {
    text-align: center;
    }
    
    /*]]>*/
    </style>
    
    
    
    <div id="div1">
    
    <p class="ctr"><a href="#"><object type="text/html" data="http://www.filmingeorgia.net/index.php">
    
    </object></a></p>
    </div></td>
       
      </tr>
       
    </table>
    Thanks

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    I don't think that's valid with IE. Heck, I didn't think it was valid with any browers, if the URL is cross-site. Kind of amazed that it is allowed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    So everything that I am using is outdated ha ....

    These were the samples that I could find.

    Can you give me a correct code

    Thanks

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    It truly is strange. MSIE seems to try to load the content, but then it just doesn't display.

    Interesting, to say the least.

    Well, you know, you *COULD* simply use an <iframe> instead.

    That works in all browsers.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thats exactly what I did, I used iframe and it works well now

    Another issue with OnMouseOver, it plays the sound but its delayed probably about 1 second. Image changes instantly.

    What do you think?

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    The sound file has to load from the server, first. That's the delay.

    If you only have a handful of sound files you want to play, you can force them to pre-load.

    Just do:
    Code:
    <span style="visibility: hidden;">
    <embed src="xyz.wav" hidden="true" autostart="false" loop="false" />
    </span>
    That *should* load the file but not play it. Then, later, your JS code loads the same file, but the browser discovers it in the cache.

    Not sure it works in all browsers, but give it a shot.

    You need a separate <embed> for each sound file. of course, but they can all be in the one hidden <span>.
    Last edited by Old Pedant; 12-07-2010 at 01:09 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I used this method, now everything is ok in IE, but in Chrome NO Sound ...

    I am going crazy here ...

    What is the good source of sample codes?

    Code:
    <body>
    
    <script LANGUAGE="JavaScript"><!--
    // Preload and play audio files with event handler (MouseOver sound)
    // designed by JavaScript Archive, (c)1999
    // Get more free javascripts at http://jsarchive.8m.com
    
    var aySound = new Array();
    // Below: source for sound files to be preloaded
    aySound[0] = "img/sound.wav";
    
    // DO NOT edit below this line
    document.write('<BGSOUND ID="auIEContainer">')
    IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
    NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
    ver4 = IE||NS? 1:0;
    onload=auPreload;
    
    function auPreload() {
    if (!ver4) return;
    if (NS) auEmb = new Layer(0,window);
    else {
    Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
    document.body.insertAdjacentHTML("BeforeEnd",Str);
    }
    var Str = '';
    for (i=0;i<aySound.length;i++)
    Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
    if (IE) auEmb.innerHTML = Str;
    else {
    auEmb.document.open();
    auEmb.document.write(Str);
    auEmb.document.close();
    }
    auCon = IE? document.all.auIEContainer:auEmb;
    auCon.control = auCtrl;
    }
    function auCtrl(whSound,play) {
    if (IE) this.src = play? aySound[whSound]:'';
    else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
    }
    function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
    function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
    //-->
    </script>
    
    
    <a href="OurPastWork.htm" onMouseOver="playSound(0)" onMouseOut="stopSound(0)">    
       <img src="img/index_r8_c4.gif" width="279" height="45" border="0" alt="" 
       onmouseover="on(this);" onmouseout="off(this)"/></a></td>
    
    </body>

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    You are using code that was written for the browsers current in 1998 or so.

    I have no idea why you would want to use something so ancient, but in any case it's not surprising that Chrome, which didn't even appear until 10 years later, can't handle obsolete code like that.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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