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
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Use onMouseOver to change content of iframe

    hi all,

    I really need help with this topic. I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work. I will appreciate your help and understanding.

    Thanks a lot!

    here is part of my code..


    var frame=new Array(6);
    frame[0]="page1.html";
    frame[1]="page2.html";
    frame[2]="page3.html";
    frame[3]="page4.html";
    frame[4]="page5.html";
    frame[5]="page6.html";
    var j=0;

    function nextFrame()

    {
    if (j < 5)
    {
    j++;
    document.getElementById(frame).contentDocument=frame[j];

    }
    return;
    }

    <span onMouseOver="nextFrame()" > <img name="upperImage" src="something.jpg" width=350 height=250 /></span>

    <iframe id="frame1" name="frame1" src="" width=350 height=250 frameborder="0"> </iframe>


    Please let me know if at least I'm in the right track.

    Thanks

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Code:
    function nextFrame()
    {
        j = ( j + 1 ) % frame.length;
       document.getElementById("frame1").src = frame[j];
    }
    But you aren't starting the page with *ANYTHING* in the <iframe>.

    Shouldn't you do
    Code:
    <iframe id="frame1" src="page1.html" ...></iframe>
    ???
    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.

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by papi-ro View Post
    Please let me know if at least I'm in the right track.
    Yes you are on the right track but I think you have a logic error here.

    Code:
    document.getElementById(frame)
    should probably be

    Code:
    document.getElementById(frame1)
    Anyway, maybe use this demo as a guide. The frame pages loop back to the start when the end of the array is reached.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                var framePages = [
                    'page1.htm',
                    'page2.htm',
                    'page3.htm',
                    'page4.htm'
                ]
                var currFrame = 0;
                function swapFrameSrc(){
                    oIframe.src = framePages[currFrame];
                    currFrame = (++currFrame > framePages.length-1)? 0 : currFrame;
                }
                window.onload=function(){
                    oIframe = document.getElementById('myIframe');
                    document.getElementById('imgSwapFrame').onmouseover=swapFrameSrc;
                    swapFrameSrc();
                }
            </script>
        </head>
        <body>
            <div>
                <img src="pic1.jpg" alt="" id="imgSwapFrame" />
                <iframe id="myIframe" src="" width="300" height="400" />
            </div>
        </body>
    </html>
    Last edited by bullant; 05-12-2011 at 01:41 AM.


  •  

    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
    •