Use onMouseOver to change content of iframe

papi-ro · 05-11-2011, 04:50 PM

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

Old Pedant · 05-11-2011, 07:55 PM

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>

???

bullant · 05-12-2011, 01:29 AM

Quote:

Originally Posted by papi-ro

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>