Solved

Is it possible to close an IFRAME with an OnMouseOut event?

Posted on 2002-07-12
18
514 Views
Last Modified: 2010-08-05
I have an Iframe(1) that is on top of another IFrame(2).  I want to close the top Iframe(1) when the mouse move out of the top iframe(1) into the other Iframe(2).  Is this possible?  If code needed I can show it to you.  Thanks.
0
Comment
Question by:atsac
  • 7
  • 6
  • 5
18 Comments
 
LVL 22

Accepted Solution

by:
CJ_S earned 225 total points
ID: 7150119
<html>
 <head>
  <style type="text/css">
  <!--
   #IFrame1{position:absolute;top:100px;left:100px;width:200px;height:100px;}
   #IFrame2{position:absolute;top:150px;left:150px;width:200px;height:100px;}
  //-->
  </style>
 </head>

 <body>
  <iframe id="IFrame1" src="http://www.soft-trax.com"></iframe>
  <iframe id="IFrame2" src="http://www.soft-trax.com" onMouseout="this.style.visibility='hidden'"></iframe>
 </body>
</html>
0
 
LVL 5

Expert Comment

by:CFXPERT
ID: 7150121
CJ_S has the correct idea on this one.
0
 

Author Comment

by:atsac
ID: 7150270
I tried it out, but IFrame2 doesn't become hidden when I move the mouse onto the page or into IFrame1.  Is there something else needed?
 
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 7150274
What browser are you using?

CJ
0
 

Author Comment

by:atsac
ID: 7150314
IE 5.0+. I can't seem get the IFrame to send any kind of message or is there a way to attach some kind of message handler.  I've searched a lot places and no one seems to have a way to close an IFrame over another IFrame.  I don't care which one sends the message or receives it, as long as the top one closes on a mouse out or something or the bottom IFrame closes the top IFrame by a onFocus or something.  I'm stumped.
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 7150350
Could you show your code?

I'm off to bed now, will see it tomorrow then :-/

CJ
0
 
LVL 5

Expert Comment

by:CFXPERT
ID: 7150374
Ok heres an example that you can tweak a little to make work the way you want but it shows how to show and hide two IFRAMES that are right on top of each other.

frame1 is not scrollable
frame2 is scrollable
click the buttons frame1 and frame2 to see the result.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
     <title>Untitled</title>
<script>
function frameOne(){
document.all.myFrame1.style.visibility = "visible"
document.all.myFrame2.style.visibility = "hidden"
}
function frameTwo(){
document.all.myFrame1.style.visibility = "hidden"
document.all.myFrame2.style.visibility = "visible"
}
</script>
</head>

<body onLoad="disFrame()">
<iframe id="myFrame1" src="boola.htm" width="200" height="200" scrolling="no" style="position:absolute;top:0;left:0;visibility:hidden"></iframe>
<iframe id="myFrame2" src="boola.htm" width="200" height="200" style="position:absolute;top:0;left:0;visibility:hidden"></iframe>
<input style="position:absolute;top:0;left:300" type="button" name="but1" value="frame1" onClick="frameOne()"><input style="position:absolute;top:0;left:370" type="button" name="but2" value="frame2" onClick="frameTwo()">
</body>
</html>
0
 
LVL 5

Expert Comment

by:CFXPERT
ID: 7150382
Furthoermore heres a better example.  ive put mouseout function calls on both the iframes.
check it out.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
     <title>Untitled</title>
<script>
function frameOne(){
document.all.myFrame1.style.visibility = "visible"
document.all.myFrame2.style.visibility = "hidden"
}
function frameTwo(){
document.all.myFrame1.style.visibility = "hidden"
document.all.myFrame2.style.visibility = "visible"
}
</script>
</head>

<body onLoad="disFrame()">
<iframe onMouseOut="frameTwo()" id="myFrame1" src="boola.htm" width="200" height="200" scrolling="no" style="position:absolute;top:0;left:0;visibility:visible"></iframe>
<iframe onMouseOut="frameOne()" id="myFrame2" src="boola.htm" width="200" height="200" style="position:absolute;top:0;left:0;visibility:hidden"></iframe>
</body>
</html>
0
 

Author Comment

by:atsac
ID: 7150434
My page is a made of a top frame and a bottom frame.  The top frame has a menu in it and it calls an Iframe for the drop down menu in the bottom Frame.  The bottom frame is composed of two Iframes.

main.html
<html>
<head>
</head>


<frameset rows="110,*" border="1" FRAMESPACING="0" TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">
<frame name="frameTopbar" src="top.html" scrolling="no" border="0" frameborder="no" noresize TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0"></frame>
<frameset name="fstMain" cols="100%,*" border="0" frameborder="0" FRAMESPACING="0" TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" >
<frame name="bottomFrame" src="iframecontainer.html" scrolling="no" FRAMEBORDER="0" BORDER="0" BORDERCOLOR="#6699CC" ></frame>
</frameset>
</frameset>
</html>



iframecontainer.html

<html>
<HEAD>

<script LANGUAGE="JavaScript" TYPE="text/javascript">

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
  for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_displayStatusMsg(msgStr) { //v1.0
  status=msgStr;
  document.MM_returnValue = true;
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}

</SCRIPT>

</head>


<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">

<!--my menu definitions there's three but I'll just show one for testing-->

<div id="cameraLayer" style="position:absolute; left:195px; top:0px; width:120px; height:200px; z-index:1; visibility: hidden">
<iframe src="camlayer.html" align="left" width="140" height="107" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" ></iframe><BR CLEAR=all></div>

<table cellspacing="0" cellpadding="0" border="1" height=100% width=100%>
<tr><td width=140 height=100%><iframe type="content-primary" frameborder=0 border=0 width=140 height=400 name=iLeftFrame src="leftmenu.html" scrolling=no ></iframe></td>
<td width=100% height=100%><iframe id="test" frameborder=0 border=0 width=100% height=100% name=iMainFrame src="iframe.html" scrolling="yes"></iframe></td></tr>
</table>
</body>
</html>





camLayer.html

<!--cut and paste javascript code from above for the MM_ functions-->

<body>
<table width="120" border="0" cellspacing="0" cellpadding="0" bgcolor="#4C98C4">
<tr><td>

<table width="120" border="0" cellspacing="0" cellpadding="0">
<tr >
<td class="sub" width=120><a href="http://www.yahoo.com" target="iMainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('camera','','images/camera_on.jpg','camera1','','./images/cameraControlSub_on.jpg')" onClick="parent.MM_showHideLayers('cameraLayer','','hide'); return true;"><img name=camera1 src=./images/cameraControlSub.jpg height=20 width=120 border=0></a></td>
</tr>
<tr>
<td class="sub"><a href="http://www.excite.com" target="iMainFrame" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('camera','','images/camera_on.jpg','camera2','','./images/cameraSub_on.jpg')" class="sub" onClick="parent.MM_showHideLayers('cameraLayer','','hide'); return true;"><img name=camera2 src=./images/cameraSub.jpg height=20 width=120 border=0></a></td>
</tr>
</table>
</td></tr></table>
</body>
</html>




top.html
<!--cut and paste javascript code from above for the MM_ functions-->


<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<table cellspacing="0" cellpadding="0" border="0" width ="100%" bgcolor="black"><tr><td><img
      name="night" src=images/night.jpg border="0" valign="bottom"></td></tr>
</table>

<table name="topMenu" cellspacing="0" cellpadding="0" border="0" width =100% height=30>
<tr height="30" valign="bottom" ><td border="0" width=750 align=bottom><a
      href="main.html" target="iMainFrame" onmouseout="MM_swapImgRestore();  MM_showHideLayers('newsLayer','','hide','supLayer','','hide','databaseLayer','','hide','carLayer','','hide','cameraLayer','','hide','adminLayer','','hide');"
      onmouseover="MM_swapImage('home','','images/home_on.jpg',1);  parent.bottomFrame.MM_showHideLayers('newsLayer','','hide','supLayer','','hide','databaseLayer','','hide','carLayer','','hide','cameraLayer','','hide','adminLayer','','hide');
      MM_displayStatusMsg('home');return true;"><img
      name="home" src=images/home.jpg height=30 width=80 border="0"></a><a
      href="db.html" target="iMainFrame" onmouseout="MM_swapImgRestore();MM_displayStatusMsg(''); "
      onmouseover="MM_swapImage('databases','','images/databases_on.jpg',1); parent.bottomFrame.MM_showHideLayers('newsLayer','','hide','supLayer','','hide','databaseLayer','','show','carLayer','','hide','cameraLayer','','hide','adminLayer','','hide');
      return true;"><img
      name="databases" src=images/databases.jpg height=30 width=115 border="0"></a><a
      href="cam.html" target="iMainFrame" onmouseout="MM_swapImgRestore();MM_displayStatusMsg('');"
      onmouseover="MM_swapImage('camera','','images/camera_on.jpg',1); parent.bottomFrame.MM_showHideLayers('newsLayer','','hide','supLayer','','hide','databaseLayer','','hide','carLayer','','hide','cameraLayer','','show','adminLayer','','hide');
      return true;"><img
      name="camera" src=images/camera.jpg height=30 width=155 border="0"></a><a
      href="doc.html" target="iMainFrame" onmouseout="MM_swapImgRestore();  MM_showHideLayers('newsLayer','','hide','supLayer','','hide','databaseLayer','','hide','carLayer','','hide','cameraLayer','','hide','adminLayer','','hide');"
      onmouseover="MM_swapImage('documentation','','images/documentation_on.jpg',1);  parent.bottomFrame.MM_showHideLayers('newsLayer','','hide','supLayer','','hide','databaseLayer','','hide','carLayer','','hide','cameraLayer','','hide','adminLayer','','hide');
      return;"><img
      name="documentation" src=images/documentation.jpg height=30 width=150 border="0"></a></tr>
</table>
</body>
</html>


I Know this is a lot of code I cut alot of it out so hopefully you can test it out.  THere maybe some errors because of the cutting out I did.  If you can't get it to work let me know.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 5

Expert Comment

by:CFXPERT
ID: 7150446
ALright I'll check it out for ya
0
 

Author Comment

by:atsac
ID: 7150456
Your button works but the onmouseout doesn't work.  That's the one I need to get working for the drop down menu to work.  Any other tricks?
0
 
LVL 5

Expert Comment

by:CFXPERT
ID: 7150604
the onMouseOut works fine for me.  try this code again in a blank html file.

<html>
<head>
     <title>Untitled</title>
<script>
function frameOne(){
document.all.myFrame1.style.visibility = "visible"
document.all.myFrame2.style.visibility = "hidden"
}
function frameTwo(){
document.all.myFrame1.style.visibility = "hidden"
document.all.myFrame2.style.visibility = "visible"
}
</script>
</head>

<body>
<iframe onMouseOut="frameTwo()" id="myFrame1" src="boola.htm" width="200" height="200" scrolling="no" style="position:absolute;top:0;left:0;visibility:visible"></iframe>
<iframe onMouseOut="frameOne()" id="myFrame2" src="boola.htm" width="200" height="200" style="position:absolute;top:10;left:0;visibility:hidden"></iframe>
</body>
</html>
0
 

Author Comment

by:atsac
ID: 7154390
What broswer are you using?  I replaced your boola.htm with links to yahoo and excite.  Nothing happens on the onmouseout event. I cut and pasted your code.
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 7154417
It is working for me from the start with Internet Explorer 5 and 6 (haven't tested with version 4).

Netscape 4 does not support iframe's.

Netscape 6 does support iframe's but I do not support it. I suppose it also works on NS 6.

Don't know about Opera.

What browser are YOU using?

CJ
0
 

Author Comment

by:atsac
ID: 7154560
IE 5.00.3103.1000, I just tested it on IE 6 and it works.  I guess for certain versions it works.  But for mine it doesn't.  What version of IE 5 did you test it on?  I'm guessing it works on IE 5.5.  But on mine it doesn't work.  I guess you need a later version of IE 5 for it to work.  Do you know of a work around for IE 5.00?  just curious, because I want my code to work for at least IE 5.00  I don't care about anything earlier.  If all else fails I guess I'll force the user to upgrade to IE 6.  Can you tell me what version of IE 5 you have?
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 7154592
5.5 :-/
0
 

Author Comment

by:atsac
ID: 7154619
Well I guess that's answers it.  I guess you had the right code from the beginning, I just have the wrong browser.  Thanks for the help.
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 7155283
Glad to help. There might be another way though. It just won't be an iframe but a DIV. Do you really need it to be an iframe?

CJ
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now