Web story/Javascript

툴팁형 레이어 열기/닫기

JKJ1004 2011. 3. 8. 13:25

<script type="text/javascript">

 <!--

 //레이어 팝업 열기

 function openLayer(IdName){

  var pop = document.getElementById(IdName);

  pop.style.display = "block";

 }

 //레이어 팝업 닫기

 function closeLayer(IdName){

  var pop = document.getElementById(IdName);

  pop.style.display = "none";

 }

//-->

</script>

<div style="position:relative; width:100%; z-index:99;">

<p><img src="" alt="열기" onclick="openLayer('layerPop'); return false" style="cursor:pointer;"></p>

<p id="layerPop" style="display:none; position:absolute; left:0; top:63px;"><img src="" alt="닫기" onclick="closeLayer('layerPop'); return false" style="cursor:pointer;"></p>

</div>


두번째

<p><a href="#info" onmouseover="view();" onfocus="view();">onmouseover</a></p>
<div id="info">
<p>onmouseover는 마우스가 올라왔을 때 발생하는 이벤트입니다.</p>
<p><input type="button" value="닫기" onclick="cls();" /></p>
</div>
<script type="text/javascript">
var target=document.getElementById('info');
target.style.display = "none"; 
function view(){target.style.display = "block";}
function cls(){target.style.display = "none";}
</script>


반응형

'Web story > Javascript' 카테고리의 다른 글

유용한 정규식 모음  (0) 2011.08.22
자바스크립트 연습장  (0) 2011.03.15
기본팝업 js  (0) 2010.01.08
표준적인 iframe 배경 투명  (0) 2009.12.17
탭메뉴  (0) 2009.06.05