Библиотека Javascript SE@RCHER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Обрамление Блок с оригинальным обрамлением (уголок вверху) без использования фото Обрамление своим цветом (соответствует W3C)</title>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
<meta name="keywords" content="HTML, javascript, CSS, Библиотека javascript" />
<meta name="description" content="Библиотека javascript. Более 3000 примеров" />
<style type="text/css" media="all">    
.byn0{ width: 200px; padding-left: 200px;}
.byn{background-color: #F5F5F5; border: solid 1px blue; position: relative; top: 1px; z-index: 3; width: 200px; padding: 4px;}
.byn2{height: 0;  width: 0;  border-bottom: 13px solid #F5F5F5;   border-left: 13px dotted transparent;   border-right: 13px dotted transparent;  left: 0px;  top: 0px; margin-left: 20px; z-index: 11;}
.byn3 { position: relative; left: -10px; top: 4px; height: 0; width: 0; border-bottom: 10px solid  blue; border-left: 10px dotted transparent; border-right: 10px dotted transparent; z-index: 10;}
.byn4 { position: relative; left: -11px; top: 2px; height: 0; width: 0; border-bottom: 11px solid  #F5F5F5; border-left: 11px dotted transparent; border-right: 11px dotted transparent; z-index: 9;}
</style>
<script type="text/javascript">
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"}
</script>
</head>
<body>
<div class="byn0"><div class="byn2"><div class="byn3"><div class="byn4"></div></div></div><div class="byn">
<a href="#" id="jNews"><img src="http://www.03www.ru/pic/001.jpg" width="200px" alt=""/></a>
</div></div>
<div id="subcontent" style="position:absolute; display:none;z-index:100">
<div style="border: 9px solid orange; background-color: white; width: 800px; padding: 8px"><a href="002.htm">Close</a>
<img src="http://www.03www.ru/pic/001.jpg" width="800px" alt="Фото 1"/>
</div></div>
<script type="text/javascript">
window.onload = function(){
  var link = document.getElementById("jNews");
  link.onclick = function (){
return overlay(this, 'subcontent')
    // подгружаем контент
    return false;
  }
}
</script>
</body>  
</html>