|
|
요즘 개인 블로그 많이 사용하죠..
이런 개인 블로그 사이드 내용을 보면, 특정한 항목은 보이고, 또는 보이지 않게 접었다가..
메뉴을 클릭하면 화면상에 펼쳐지거나, 다시 접힌 상태로 만들수 있다.
특히, 메이져급 포탈에서도 많이 활용하고 있는 내용 숨김또는 보이는 기능을
간단하게 표현해보자..
단, html 수정 및 js가 작동하는 블로그 및 개인 일반 사이트용으로 사용되며, 네이버나, 싸이월드 같은
포탈에서
제공하는 블로그 및 카페에서는 활용할 수 없습니다.
↑ 클릭하면 창이 창이 나타는 기능
우선 html 상단 [head][/head] 사이에 아래 자바스크립트를 넣는다.
<script type="text/javascript">
function showhide(obj) { // 플래시 또는 html에서 오브젝트id값에 의한 호출
var seogd = document.getElementById(obj); // 호출된 id값을 seogd 변수로 치환
if ( seogd.style.display != 'none' ) { // 만약 seogd가 none이 아니면 즉, 보여지는 상태이면
seogd.style.display = 'none'; // seogd를 숨기고
} else {
seogd.style.display = ''; // seogd이 숨김 상태이면 나타내라
}
}
</script>
<body>
탭으로 사용할 구조를 만든다.
<div class="button" onClick="showhide('show_win');">탭열기</div> 또는
<div class="button"><a href="javascript:showhide('show_win');" alt="" >탭열기</a></div> 이렇게 해도 된다.
<div id="show_win" style="display:none">
div 가 처음에는 숨겨져 있다가 오버하면 보이고,<br />
다시 내려가면 숨겨집니다.
</div>
</body>
플래시에서 버턴 또는 무비클립에 f9번키를 눌러.. 액션스크립트 창을 열고..
on
(rollOver) { //마우스 포인터가 버튼에
올라갔을 때
getURL("javascript:showhide('show_win')");
//자바스크립트 를 작동시키라
}
on
(release) //마우스 클릭하면
getURL("javascript:showhide('show_win')");
//자바스크립트를 작동시켜라
}
이렇게 하면.. 탭열기를 클릭하면, 아래에 있는 id=abc가 보이고, 한번더 클릭하면, 닫히는 구조로 되어있다..
이
내용은 현재 이 블로그에도 동일하게 적용하고 있고, 상단에 있는 메뉴와 최근글, 최근뎃글, 링크 및 좌측에 슬라이드 메뉴
중간 버튼에도 사용하고
있다.
간단하지만,
요긴하게 사용하면, 여러분들의 홈페이지 제작에 많은 도움을 줄것이다.
'차근차근 > JAVA Script' 카테고리의 다른 글
| 자바스크립트 질문좀 할게요. (0) | 2014.07.29 |
|---|---|
| [자바스크립트] 경고창 없이 창 닫기 (0) | 2014.07.29 |
| JAVA Script (0) | 2014.07.29 |
| 중첩함수 / 클로저 (0) | 2014.07.29 |
| <input type="text"> (0) | 2014.07.29 |