SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Some help with javascript.

    Is there a way to incoperate a onmouseover on an iframe?

    What I mean is when the mouse hoover over the iframe then an action will occur.

    Thanks.

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    var iframe = document.getElementById('myIFrame');
    iframe.onmouseover = myFunction;
     
    function myFunction() {
        alert(this.getAttribute('id'));
    }
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the quick response however, this doesnt seem to work.

    Here is what I am trying to do:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var iframe = document.getElementById('testiframe');
    iframe.onmouseover = myFunction;
     
    function myFunction() {
        alert(this.getAttribute('id'));
    }
    </script>
    </head>
    <body>
    <table width=100&#37; height=100%>
    <tr><td height=5%>Iframe test</td></tr>
    <tr><td height=95% valign=top>
    <iframe width=100 height=100 id="testiframe" name="testiframe"></iframe>
    </td></tr>
    </table>
    </body>
    </html>
    I want it so that whenever the mouse is over the iframe box that an action will occur.

  4. #4
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by javalearnie View Post
    Thank you for the quick response however, this doesnt seem to work.

    Here is what I am trying to do:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var iframe = document.getElementById('testiframe');
    iframe.onmouseover = myFunction;
     
    function myFunction() {
        alert(this.getAttribute('id'));
    }
    </script>
    </head>
    <body>
    <table width=100&#37; height=100%>
    <tr><td height=5%>Iframe test</td></tr>
    <tr><td height=95% valign=top>
    <iframe width=100 height=100 id="testiframe" name="testiframe"></iframe>
    </td></tr>
    </table>
    </body>
    </html>
    I want it so that whenever the mouse is over the iframe box that an action will occur.
    That doesn't work, indeed.
    You're using the script BEFORE the page -or the DOM- has finished loading.
    You should use the window.addEvent function (by Scott Andrew), or anything to bind a onload event to the window properly, to add an onload event.

    This does work:
    Code HTML4Strict:
    <html>
    <head>
        <script type="text/javascript">
        <!--
            window.addEvent=function(e,ev,f,c){if(e.addEventListener){e.addEventListener(ev,f,c);}else if(e.attachEvent){var r=e.attachEvent('on'+ev,f);return r;}else{e['on'+ev]=f;}};
     
            function initialize() {
                var iframe = document.getElementById('testiframe');
                iframe.onmouseover = myFunction;
            }
     
            function myFunction() {
                alert(this.getAttribute('id'));
            }
     
            window.addEvent(window, "load", initialize, false);
        -->
        </script>
    </head>
    <body>
        <iframe width=100 height=100 id="testiframe" name="testiframe"></iframe>
    </body>
    </html>
    FOR SALE: 1 set of morals, never used, will sell cheap

  5. #5
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function() {
    var iframe = document.getElementById('testiframe');
    iframe.onmouseover = function() {  alert(this.getAttribute('id')); }
    }
    </script>
    </head>
    <body>
    <table width=100&#37; height=100%>
    <tr><td height=5%>Iframe test</td></tr>
    <tr><td height=95% valign=top>
    <iframe width=100 height=100 id="testiframe" name="testiframe"></iframe>
    </td></tr>
    </table>
    </body>
    </html>

  6. #6
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note: window.onload is not supported in all browsers, plus you can't attach multiple functions to the onload event by using window.onload solely.
    FOR SALE: 1 set of morals, never used, will sell cheap

  7. #7
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot hexburner and muazzez. I am still quite new to javascript.

    This is working for me now!

  8. #8
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *EDIT*

    Nevermind, looks like I solved this one.

    It seems like you can't use the var iframe twice.


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
  •