Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IFrames 2

Status
Not open for further replies.

Stretchy

Programmer
Mar 26, 2002
87
GB
Right... A few requests.. plz tell me if they are impossible.

1. An onMouseOver event where an IFrame appears

2. The IFrame is floating and does not effect the rest of the page layout when it appears.

If this is possible plz tell me how to do it :p

Thx _______________
Stretchy [Pipe]
 
Yes. Both are possible.

<a href=&quot;#&quot; onMouseOver=&quot;thediv.style.display=''&quot;>show it!</a>

<iframe src=&quot;page.html&quot; style=&quot;display:none;position:absolute;top:100;left:150;z-index:2;&quot; id=&quot;thediv&quot;></iframe>

Rick If I have helped you just click the first link below to let me know :)
 
thx very much...Now i have one more question.

I'm using these frames for a horizontal menu system but I want one frame to close when another opens. At the moment they all stay open until u move your mouse on and off it. It would be great if they all closed down when a new one was opened..... any ideas?

Thx _______________
Stretchy [Pipe]
 
Here you go. Enjoy!

<SCRIPT>
<!--
function change(no){

var divs=new Array(div1,div2,div3,div4,div5);
for(i=0; i<divs.length; i++){
divs.style.display='none'
}
divs[no].style.display=''

}
//-->
</SCRIPT>

<a href=&quot;javascript:change(0);&quot;>link1</a>
<a href=&quot;javascript:change(1);&quot;>link2</a>
<a href=&quot;javascript:change(2);&quot;>link3</a>
<a href=&quot;javascript:change(3);&quot;>link4</a>
<a href=&quot;javascript:change(4);&quot;>link5</a>
<div id=&quot;div1&quot; style=&quot;display:none;position:absolute;top:100;left:150;z-index:2;&quot;>take this out...only for testing--div1<iframe src=&quot;page1.html&quot;></iframe></div>
<div id=&quot;div2&quot; style=&quot;display:none;position:absolute;top:100;left:150;z-index:2;&quot;>take this out...only for testing--div2<iframe src=&quot;page2.html&quot;></iframe></div>
<div id=&quot;div3&quot; style=&quot;display:none;position:absolute;top:100;left:150;z-index:2;&quot;>take this out...only for testing--div3<iframe src=&quot;page3.html&quot;></iframe></div>
<div id=&quot;div4&quot; style=&quot;display:none;position:absolute;top:100;left:150;z-index:2;&quot;>take this out...only for testing--div4<iframe src=&quot;page4.html&quot;></iframe></div>
<div id=&quot;div5&quot; style=&quot;display:none;position:absolute;top:100;left:150;z-index:2;&quot;>take this out...only for testing--div5<iframe src=&quot;page0.html&quot;></iframe></div>

Rick If I have helped you just click the first link below to let me know :)
 
Will this code stop multiple i frames opening at once? My problem is that I have several hyperlinks that are very close together and if i move the mouse over all of them, all of the iframes pop up and are on the page at the same time.

I havent been able to get your code to work :( but thank you anyway _______________
Stretchy [Pipe]
 
What browser are you using? When I view it here it works fine. I even have some text that changes so that it's easy to test. When I see it here, all iframes close except for the one I just opened with the links. If I have helped you just click the first link below to let me know :)
 
Sorry! That was made for an onClick not onMouseOver. :-/ This should work fine.

<SCRIPT>
<!--
function change(no){

var divs=new Array(div1,div2,div3,div4,div5);
for(i=0; i<divs.length; i++){
divs.style.display='none'
}
divs[no].style.display=''

}
//-->
</SCRIPT>
<a href=&quot;#&quot; onMouseOver=&quot;javascript:change(0);&quot; onClick=&quot;return false;&quot;>Link1</a>
<a href=&quot;#&quot; onMouseOver=&quot;javascript:change(1);&quot; onClick=&quot;return false;&quot;>Link2</a>
<a href=&quot;#&quot; onMouseOver=&quot;javascript:change(2);&quot; onClick=&quot;return false;&quot;>Link3</a>
<a href=&quot;#&quot; onMouseOver=&quot;javascript:change(3);&quot; onClick=&quot;return false;&quot;>Link4</a>
<a href=&quot;#&quot; onMouseOver=&quot;javascript:change(4);&quot; onClick=&quot;return false;&quot;>Link5</a><div id=&quot;div1&quot; style=&quot;display:none;position:absolute;top:100;left:150;z-index:2;&quot;>take this out...only for testing--div1<iframe src=&quot;page1.html&quot;></iframe></div>
<div id=&quot;div2&quot; style=&quot;display:none;position:absolute;top:100;left:150;z-index:2;&quot;>take this out...only for testing--div2<iframe src=&quot;page2.html&quot;></iframe></div>
<div id=&quot;div3&quot; style=&quot;display:none;position:absolute;top:100;left:150;z-index:2;&quot;>take this out...only for testing--div3<iframe src=&quot;page3.html&quot;></iframe></div>
<div id=&quot;div4&quot; style=&quot;display:none;position:absolute;top:100;left:150;z-index:2;&quot;>take this out...only for testing--div4<iframe src=&quot;page4.html&quot;></iframe></div>
<div id=&quot;div5&quot; style=&quot;display:none;position:absolute;top:100;left:150;z-index:2;&quot;>take this out...only for testing--div5<iframe src=&quot;page0.html&quot;></iframe></div>

Rick If I have helped you just click the first link below to let me know :)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top