View Full Version : Overlapping Content Link

07-15-2006, 10:26 PM
I have a one question about that script.
When i click on a link in the page, popup is apear at right side (how i wont),
in that popup i have a link and when i click on that link, it need to open another popup.
I was try but without success.

you can look on: www.petar-zulj.iz.hr

07-16-2006, 03:40 AM
Part of your problem is that you have allowed your editor to insert line breaks in the HTML code where they do not belong. Either that, or you put them in there yourself. Anyways, the below page is a working example of a nested overlapping content link. Copy and paste it into notepad with word wrap turned off and save it as:


View it in the browser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<base href="http://www.petar-zulj.iz.hr/" />
<style type="text/css">
body {
background-color: #14285F;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.9em;
padding: 0px;
margin-top: 100px;
margin-right: 0px;
margin-bottom: 100px;
margin-left: 50px;
#mylink1 {
text-indent:-100em; /* image replacement Mike Rundle style */
text-decoration:none; /* potrebno da se skine underline */
background: white url(http://www.petar-zulj.iz.hr/slike/01.gif) no-repeat;
#mylink1:hover {
background-image: url(http://www.petar-zulj.iz.hr/slike/02.gif);
#mylink1:active {
background-image: url(http://www.petar-zulj.iz.hr/slike/02.gif);
#subcontent2 {
margin-left: 240px;
margin-top: -30px;

<script type="text/javascript">

* Overlapping Content link- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code

function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
return totaloffset;

function overlay(curobj, subobj){
if (document.getElementById){
var subobj=document.getElementById(subobj)
subobj.style.left=getposOffset(curobj, "left")+"px"
subobj.style.top=getposOffset(curobj, "top")+"px"
return false
return true

function overlayclose(subobj){

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];}}


<p><b><a href="search.htm" id="mylink1" 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">
<b><a href="search.htm" onClick="return overlay(this, 'subcontent')">Search DD</a></b><br />

<div align="right"><a href="#" onclick="overlayclose('subcontent2'); return false">Close</a></div>

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

<div style="border: 9px solid orange; background-color: white; width: 300px; padding: 8px">
<p><b>Search Dynamic Drive:</b></p>
<form method="get" action="http://search.freefind.com/find.html" id="topform">
<input type="HIDDEN" NAME="id" SIZE="-1" VALUE="6299074" />
<input type="HIDDEN" NAME="pageid" SIZE="-1" VALUE="r" />
<input type="HIDDEN" NAME="mode" SIZE="-1" VALUE="ALL" />
<input type="HIDDEN" name="n" value="0">
<input name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" />
<input value="Search" class="topformbutton" type="submit" />
<div align="right"><a href="#" onClick="overlayclose('subcontent'); return false">Close</a></div>



07-16-2006, 08:08 AM
Hi jscheuer1.
Thanks you so much for helping me about this, it works perfect.
But i have another question. What if i have two links in that popup window one is Search DD another is Sarch DD2 and when
i click on Search DD,it will open a new popup window like you show me, but i dont know when i have another link Search DD2 how to make
to opent that link in a new window. (Search DD l Search DD2)

I was try to put that Search DD2 in :

<DIV id="subcontent2" style="position:absolute; display:none">
<div style="border: 9px solid black; background-color: lightyellow;width: 400px; height: 400px; padding: 8px">
<b><a href="search.htm" onClick="return overlay(this, 'subcontent')">Search DD</a>&nbsp;l<DIV id="subcontent2"....
Search DD2</b><br /></a>....

But it is not working
Sorry if i bother you with this.

07-23-2006, 07:59 AM
I just wont to say that im slove the problem.

08-06-2006, 02:28 PM

jscheuer1 please i need your help, i have a problem with this overlapping script.

In the code of that script there is a line of code: <div align="right"><a href="#" onClick="overlayclose('subcontent'); return false">Close</a></div> to close a window.

I was tray but i dont know how to put a little roolover picture efect in it, and when somebody click on it that he can close that window.

I put a one picture in the place where is word "Close" and run it in browser, it is working but then i got a border around that picture and dont know how to remove it.


08-06-2006, 08:10 PM
To remove a border from a linked image use the border="0" attribute in the image tag:

<img src="whatever.gif" border="0">

To add a simple rollover to any ordinary image:

<img src="whatever.gif" border="0" onmouseover="this.src='someother.gif';" onmouseout="this.src='whatever.gif';">

It would be a good idea to preload the rollover image in the head of the page like so (simple preload image routine):

<script type="text/javascript">
var newI1=new Image();

08-08-2006, 10:04 PM
jscheuer1 thank you for help me again.
I was put what you was say and it is working ok.
Thank you again.

P.S. I will post a link to web page when i finish it.