Today is . Page created 08/17/05, updated 10/07/07

Overlapping Overlapping Link Content Link

Display content in tight areas on your page, by displaying the content on top of any link used to activate it. The content floats above and overlaps anything beneath it. Think of it as adding another dimension to your webpage to create more space. This script is extremely handy for displaying search boxes, additional links etc. in a tight area, such as the sidebar column of a page. The content to reveal/ overlap in each case is simply contained inside a DIV on the page for easy customizing, and you can have multiple overlapping content on the page, each associated with a different link.

[ Example #1 ]

[ Example #2 ]

[ Example #3 ]

We have tested the code in IE6.0, Firefox1.5.0.1, Opera8.54, Netscape8.0.4 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. The reconfigurations are made only within the <BODY> section of the code. These reconfigurations are for cosmetics and the adding of your material inside the overlapping box effect. This/these part(s) (As many as you need) you would paste anywhere within this section you want this effect to appear. See below:

<!---------- Start Code And Reconfigurations For <BODY> Section For Each Box ---------->

<p><b><a href="search.htm" onClick="return overlay(this, 'subcontent2')">
Another example</a></b><br /></p>

<!--Sub content to overlay link when clicked on.
Do not remove outermost <div id="subcontent2"> tag below. -->
<DIV id="subcontent2" style="position:absolute; display:none">

<div style="border: 9px solid black; background-color: lightyellow; width: 400px; height: 400px;
padding: 8px">
Add Your Content Here
<div align="right"> <a href="#" onClick="overlayclose('subcontent2'); return false">Close</a></div>
</div>

</DIV>

<!---------- End Code For <BODY> Section For Each Box ---------->

Explanations Of Above Color Coded Areas

  • <b>     </b>     These bold tags surround the name of the link to open the overlapping content box. They can be removed if you do not want the boldface effect surrounding the link.

  • Another example     This is the name of the link to open the overlapping content box. This you change to the name of the link you want it to open.

  • subcontent2     If you notice there are two ( 2 ) different boxes in the default code that can open. The first one does not have a number assigned to it. The second one has a "2" attached. Each additional link you want to open with this effect must be assigned a sequential number. In all the respective above places. In other words, if you are going to add another link to open to the default two, then the next one will have the number 3 attached.
    subcontent3.

  • border: 9px solid black;     This is the width (in pixels) and color of the border surrounding the box that will open. The larger the number, the wider the border. You can also change the word "solid" to "dotted" and have a completely different looking border.
    [ Dotted Border Effect ]

  • width: 400px; height: 400px;     These are obvious. The height attribute is really not needed if you want to remove it. It is only there if you want a specific height and the content is much smaller than the defined size. It is also there if you define a specific height and want a certain amount of padding around your content. The width will stay constant, but the height will expand and contract to the material within.

  • padding: 8px     This denotes how much blank space (padding) will be surrounding the material you place inside. The higher the number, the more space (padding) surrounding your material.
    [ padding: 8px ]
    [ padding: 30px ]

  • Add Your Content Here     This is quite obvious, This is where you insert your material.

  • <div align="right">     This can be reconfigured to either right, left or center. This is to position the "Close" link.

  • <a href="#" onClick="overlayclose('subcontent2'); return false">Close</a>     This is the code to close the box. Do Not remove this or you will not be able to close the overlapping link box!

  • </div>   </div>   </DIV>     Again, Do Not! remove these tags. If you do, the effect will "Not" function.

The next thing we shall cover is the replacement of the text link by an image. Basically, all you do is remove the text and replace it with an uploaded image of your choice

We Just Replaced The Text With This Image! Click Me To Find Out Howto

On A Final Note     We will cover the positioning of the links side by side as opposed to being on top of each other. The reason the links are on top of each other is because they are independent <div> id tags. This causes them not to be able to be positioned side by side. The work around for this is quite simple. Just place each <BODY> section of code for each overlapping content box inside a <table> Just grab the below [ Howto ] link and you are there.

[ Howto Position Side By Side ]
 [ Example ]
 [ Example ]
 [ Example ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]  

Talk Live To A Support Technician

Search Our Site By Individual letter

[ A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ G ]  [ H ]  [ I ]  [ J-K ]  [ L ] 
[ M ]  [ N-O ]  [ P-Q ]  [ R ]  [ S ]  [ T ]  [ U-V ]  [ W ]  [ X-Y-Z ] 

Little Tips Directory

[ Page 1  ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5  ] [ Page 6  ] [ Page 7  ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ Form Index ]
[ 2001 ] [ 2002 ] [ 2003 ] [ 2004 ] [ 2005 ] [ 2006 ] [ 2007 ]
[ Disclaimer ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [  Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.

Copyright © Consigliere Ltd., All Rights Reserved. 2001-