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:
demo.htm
View it in the browser:
Code:
<!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">
<head>
<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 */
display:block;
width:224px;
height:46px;
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;
}
-->
</style>
<script type="text/javascript">
<!--
/***********************************************
* Overlapping Content link- © 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;
parentEl=parentEl.offsetParent;
}
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"
subobj.style.display="block"
return false
}
else
return true
}
function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
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];}}
}
//-->
</script>
</head>
<body>
<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>
</div>
</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" />
</form>
<div align="right"><a href="#" onClick="overlayclose('subcontent'); return false">Close</a></div>
</div>
</DIV>
</body>
</html>
Junior Coders
Overlapping Content Link
Posting Permissions
Reply With Quote
Bookmarks