Hovering iframe

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <table cellpadding=0 cellspacing=0 border=0><tr> <td valign="top" height=50 BGCOLOR="#660099" TEXT="#080000"> <div> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="697" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="LEFT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 35 ><NOBR><div> <B>Sami's Site: CSB - Trellix Support and Tests</B></div> </NOBR></tD> <tD VALIGN=CENTER WIDTH="65"><div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" > </FONT>     <FONT SIZE="1" COLOR="#CCCC99" FACE="Arial" >   </FONT></div> </tD> <tD VALIGN=CENTER WIDTH="110"><div> </div> </tD> </tR> </TABLE></div> <div> </div> </td> </tr><tr> <td valign="top" height=430 BGCOLOR="#DDDDDD" TEXT="#080000"> <div> <A HREF="http://www.samisite.com/test-csb2nf/id43.htm" TARGET="_top" TITLE="http://www.samisite.com/test-csb2nf/id43"><U><B>RETURN TO MAIN IFRAME TUTORIAL</B></U></A></div> <bR> <div> <B>Hovering iframe</B></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <STYLE>  </STYLE>    </B><FONT SIZE="3" COLOR="#FFFFFF" FACE="Arial" > <style> .highlighttext{ background-color:yellow; font-weight:bold; color: #6600CC; } </style> <script language="Javascript">  </script>  </FONT><B>  </B><B> <style type="text/css"> #frame5 {position:absolute; left: 310px; top: 240px; width: 166px; height: 93px; z-index: 100 } </style>  </B><FONT SIZE="3" COLOR="#330099" FACE="Arial" ><B> <div id="frame5"> <iframe width="166" height="93" name="frame5" src="cb.htm" frameborder="0" scrolling="no"> </iframe> </div>  </B></FONT></div> <div> <B>STATIC "FRAME5" - THIS IFRAME HOVERS OVER IMAGE!</B></div> <div> <B><IMG SRC="0a2123c0.jpg" border=0 width="530" height="316" ALT="backcollage" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <div> <B>The blue center square is on another page, showcased in an iframe that floats over the collage image!</B></div> <bR> <bR> <bR> <div> <B>FRAME 5: </B><FONT SIZE="3" COLOR="#660099" FACE="Arial" ><B>borderless, shown in blue box above over white image,  scroll bar turned off.</B></FONT><FONT SIZE="2" COLOR="#660099" FACE="Arial" ><B>    </B></FONT></div> <bR> <div> <B>Two parts to this code, placed into your page separately. </B><FONT SIZE="2" COLOR="#660099" FACE="Arial" ><B>(use insert >HTML in CSB/webgem in Trellix)</B></FONT></div> <bR> <div> <B>a)</B><FONT SIZE="3" COLOR="#660099" FACE="Arial" ><B> Using CSS positioning code, the iframe has an added definition to cause the iframe to float above the page elements. </B></FONT></div> <div> <B>Define:</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c899006600.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">how far from the left</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c899006600.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">how far from the top (I have it WAY DOWN the page!)</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c899006600.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">width of iframe</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c899006600.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">height of iframe</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c899006600.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">z-index stack order.  The z-index property of the code is set high to force this item to be in front of other items on the page.  The z-index property can only be used with the "position:absolute;" setting.</B></div> <div> <B>To capture the code, press Select All </B><B>then COPY the contents.</B><FONT SIZE="2" COLOR="#660099" FACE="Arial" ><B> </B></FONT></div> <div> <B> <form name="code1"> <a class="highlighttext" href="javascript:HighlightAll('code1.select1')">Select All</a><br> <textarea name="select1" rows=10 cols=80 > <style type="text/css"> #FRAME5 {position:absolute; left: 310px; top: 1758px; width: 166px; height: 93px; z-index: 100 } </style> </textarea> </form>  </B></div> <bR> <div> <FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>b)</B></FONT><B> The iframe code below has the <div> codes added and should be placed where you want the iframe to appear.  After publishing, tweak the CSS code to have the iframe appear exactly where you want it! </B><B> </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>Modify items highlighted in </B></FONT><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>blue</B></FONT><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> in code as necessary to fit your site.</B></FONT></div> <div> <B><div id="FRAME5"></B></div> <div> <B><iframe name="FRAME5"  width="</B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>166</B></FONT><FONT SIZE="2" COLOR="#660099" FACE="Arial" ><B>" </B></FONT><B>height="</B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>93</B></FONT><B>" </B><B>src="</B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>cb.htm</B></FONT><B>"</B><FONT SIZE="3" COLOR="#660099" FACE="Arial" ><B> </B></FONT><B>frameborder="</B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>0</B></FONT><B>"</B><FONT SIZE="2" COLOR="#660099" FACE="Arial" ><B> </B></FONT><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>scrolling="no"</B></FONT><B>></iframe></B></div> <div> <B></div></B></div> <bR> <div> <B> <TABLE BORDER="1" CELLPADDING="4" CELLSPACING="0" WIDTH="734" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="ROWS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP COLSPAN=2 BGCOLOR=#EEEEEE HEIGHT= 75 ><NOBR><div> <B>PLACEMENT CONSIDERATION FOR FLOATING FRAME, seen in FRAME 5:</B></div> <div> This floating iframe is placed in a SPECIFIC place on your page using the ABSOLUTE positioning.</div> <div> You can have a problem with placing your iframe over an element (table, image, etc) that is CENTERED!</div> <div> This iframe code is far more difficult to get to work right and takes more effort.  It also may not appear correctly in other than IE.</div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 210 WIDTH="294"><div> When your visitor sees your page using the SAME resolution as you built the page, the iframe will line up over the element the way you intended.800x600</div> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="0a7a0780.jpg" border=0 width="160" height="120" ALT="800600" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <B>notice placement of center </B><B>blue</B><B> box!</B></div> </tD> <tD VALIGN=TOP WIDTH="420"><div> When your visitor sees your page using a HIGHER  resolution than your setting the element will move to the middle, but the iframe stays exactly where you set it! 1024x768</div> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="0a8a0780.jpg" border=0 width="160" height="120" ALT="1024768" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> Much better to use a LEFT alignment for your element (table, image, etc) below so it matches alignment when screen resolution changes!</div> </tD> </tR> </TABLE></B></div> <bR> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="737" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="ROWS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP COLSPAN=3 BGCOLOR=#FFFFFF HEIGHT= 23 WIDTH="717"><div> <B>Understanding the basic iFrame code:</B></div> </tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=3 HEIGHT= 39 WIDTH="717"><div> <B><iframe name="</B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>FRAMENAME</B></FONT><B>" src="</B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>contentpage.htm</B></FONT><B>"</B><FONT SIZE="3" COLOR="#660099" FACE="Arial" ><B> </B></FONT><B>width="</B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>100</B></FONT><FONT SIZE="3" COLOR="#660099" FACE="Arial" ><B>" </B></FONT><B>height="</B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>280</B></FONT><B>" frameborder="</B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>0</B></FONT><B>"</B><FONT SIZE="3" COLOR="#660099" FACE="Arial" ><B> </B></FONT><FONT SIZE="3" COLOR="#CC0000" FACE="Arial" ><B>scrolling="no"</B></FONT><B>></iframe></B></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 20 ><NOBR><div> <B>Code elements: </B></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <B>Used in samples:</B></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="398"><div> <B>What is it?</B></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 58 WIDTH="141"><div> <B>iframe name</B></div> </tD> <tD VALIGN=TOP WIDTH="176"><div> <B>FRAME5</B></div> </tD> <tD VALIGN=TOP><NOBR><div> <B>Name of the frame </B>(call it anything you want)</div> <div> No spaces, no symbols except - and _</div> <div> Multiple iframes: each iFrame needs a different name</div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 89 WIDTH="141"><div> <B>src</B></div> </tD> <tD VALIGN=TOP WIDTH="176"><div> <B>cb.htm</B></div> </tD> <tD VALIGN=TOP WIDTH="398"><div> <B>Address</B> of the Contents page that you want to see in the frame  </div> <div> <FONT SIZE="2" COLOR="#000000" FACE="Arial" >If you want to see a blank box until you click a link, use </FONT><B>about:blank</B><B> </B><FONT SIZE="2" COLOR="#000000" FACE="Arial" >as your address. </FONT></div> <div> <B>Better choice:</B> start with a basic page with an introduction, etc.</div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 39 WIDTH="141"><div> <B>width</B></div> </tD> <tD VALIGN=TOP WIDTH="176"><div> <B>166</B></div> <div> <B>40%</B></div> </tD> <tD VALIGN=TOP><NOBR><div> <B>Wide: </B>Enter number of <B>pixels</B> for the window</div> <div> Or enter the <B>percentage</B> for the window size </div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 39 WIDTH="141"><div> <B>height</B></div> </tD> <tD VALIGN=TOP WIDTH="176"><div> <B>93</B></div> <div> <B>60%</B></div> </tD> <tD VALIGN=TOP><NOBR><div> <B>High:</B> Enter number of <B>pixels</B> for the window</div> <div> Or enter the <B>percentage</B> for the window size </div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 39 WIDTH="141"><div> <B>frameborder</B></div> </tD> <tD VALIGN=TOP><NOBR><div> <B>1</B><FONT SIZE="2" COLOR="#3333FF" FACE="Arial" ><B> </B></FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" >= show a 3d edge</FONT></div> <div> <B>0</B><FONT SIZE="2" COLOR="#3333FF" FACE="Arial" ><B> </B></FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" >= no border</FONT></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="398"><div> <B>3d edge </B>on the iFrame window </div> <div> Using 0 makes the edge invisible.</div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 109 WIDTH="141"><div> <B>scrolling</B></div> </tD> <tD VALIGN=TOP><NOBR><div> <B>auto</B><FONT SIZE="2" COLOR="#3333FF" FACE="Arial" ><B> </B></FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" >= browser decides</FONT></div> <div> <B>yes</B><FONT SIZE="2" COLOR="#3333FF" FACE="Arial" ><B> </B></FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" >= always have</FONT></div> <div> <B>no</B><FONT SIZE="2" COLOR="#3333FF" FACE="Arial" ><B> </B></FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" >= do not show</FONT></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="398"><div> <B>Scroll bar: </B> if your content page is too long or wide to fit into the iFrame, then scroll bars appear automatically as needed, even without the scrolling="auto" code!</div> <div> <B>Adding </B><B>scrolling="no" </B><B>to your code will stop the scroll bar from showing.</B> But be careful!  If you have content outside the window, your visitor will not be able to see it.</div> </tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=3 BGCOLOR=#EEEEEE HEIGHT= 55 WIDTH="717"><div> <B>Other iframe settings you can choose to use though I have no samples made with them:</B></div> <div> <B><iframe name="FRAMENAME" src="</B><B>contentpage.htm</B><B>"</B><B> </B><B>width="</B><B>100</B><B>" </B><B>height="</B><B>280</B><B>" frameborder="</B><B>0</B><B>"</B><B> </B><B>scrolling="no" </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>hspace=</B></FONT><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>10</B></FONT><B> </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>vspace=</B></FONT><FONT SIZE="2" COLOR="#6633FF" FACE="Arial" ><B>5</B></FONT><B> </B><B>></iframe></B></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 58 WIDTH="141"><div> <B>hspace</B></div> <div> <B>vspace</B></div> </tD> <tD VALIGN=TOP WIDTH="176"><div> <B>10</B></div> <div> <B>5</B></div> </tD> <tD VALIGN=TOP><NOBR><div> <B>External Space AROUND the iframe.</B></div> <div> Adust the hspace (horizontal-space on right and left) or </div> <div> vspace (vertical-space above and below the iframe.</div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 71 ><NOBR><div> <B><body topmargin=10 leftmargin=5></B></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="398"><div> <B>Internal Space WITHIN the iframe.  </B>This code is placed into the body of the content page to adjust the margin within the iframe.  On FRAME 5 sample, I set the margins to 0.  In CSB, use Insert> HTML to place the code.  </div> </tD> </tR> </TABLE></div> <bR> </td> </tr></table></body>