www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Dynamic update an IFRAME problem

  1. #1
    Join Date
    Jul 2009
    Posts
    2

    resolved [RESOLVED] Dynamic update an IFRAME problem

    Hi all,

    My problem is:

    I'm trying to create a website where, when you hover a link (onmouseover) then a different content is shown in an IFRAME? e.g.
    ...
    ...
    ...
    <a href="#" class="dark" onmouseover="mouseover('front.htm');" onmouseout="mouseout('default.htm');">About Us</a>
    ...
    ...
    ...
    <div>
    <script type="text/javascript">
    function mouseover(txt)
    {
    document.write('<iframe src ="' + txt +'" width="100%" height="500" scrolling="no" frameborder="0"></iframe>');

    }

    function mouseout(txt1)
    {
    document.write('<iframe src ="' + txt1 +'" width="100%" height="500" scrolling="no" frameborder="0"></iframe>');
    }
    </script>
    </div>
    ...
    ...
    ...

    but all this does is read in the IFRAME on the entire page and not as intended only in the <div> section... I'm not an experienced web programmer, I'm a newbie.... Hope you can help me

  2. #2
    Join Date
    Jul 2009
    Posts
    2
    Okay, I found out how to do....

    function mouseover1(txt)
    {
    var tmp = document.getElementById("frames");
    tmp.src = txt;

    }
    function mouseout1()
    {
    var tmp = document.getElementById("frames");
    tmp.src = "front.htm";
    }
    ...
    ...
    ...
    <a href="#" class="dark" onmouseover="mouseover1('index-2.html');" onmouseout="mouseout1()" >About Us</a>
    ...
    ...
    ...
    <iframe src ="front.htm" name="frames" id="frames" width="100%" height="500" scrolling="no" frameborder="0"></iframe>
    ...
    ...
    ...

    This solves the problem :-)
    add the attribute name, and id to the <iframe> tag, and via the document.getElementById("frames"); I am able to set the <iframe src="someurl" > by tmp.src = txt; (see the function)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles