• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 593
  • Last Modified:

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

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
atsac
Asked:
atsac
  • 7
  • 6
  • 5
1 Solution
 
CJ_SCommented:
<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
 
CFXPERTCommented:
CJ_S has the correct idea on this one.
0
 
atsacAuthor Commented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
CJ_SCommented:
What browser are you using?

CJ
0
 
atsacAuthor Commented:
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
 
CJ_SCommented:
Could you show your code?

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

CJ
0
 
CFXPERTCommented:
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
 
CFXPERTCommented:
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
 
atsacAuthor Commented:
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
 
CFXPERTCommented:
ALright I'll check it out for ya
0
 
atsacAuthor Commented:
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
 
CFXPERTCommented:
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
 
atsacAuthor Commented:
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
 
CJ_SCommented:
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
 
atsacAuthor Commented:
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
 
CJ_SCommented:
5.5 :-/
0
 
atsacAuthor Commented:
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
 
CJ_SCommented:
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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 7
  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now