데모를 열어보시면 텍스트로 이루어진 문장하나가 있습니다.
"해피CGI" 와 "운영진" 이란 글자를 클릭하시면 그부분에 관련된 텍스트가 나오게됩니다.
텍스트뿐만아니라 이미지, 테이블등 여러가지 효과를 적용시킬수 있습니다.
아래는 본자료의 자바스크립트입니다.
<html>
<head>
<title>해피CGI</title>
<style>
.hide {
display: none;
}
.show {
display: inline;
border-bottom: dotted thin;
}
.show2 {
display: inline;
background-color: #FEFF9F;
padding: 0 3px 0 3px;
font-size: 12px;
}
</style>
<script type="text/javascript">
function showhide(s){
while(s.nodeType!=1 && s.nodeName.toLowerCase()!='span'){s=s.nextSibling};
s.className=(s.className=='show2')?'hide':'show2';
return false;
}
window.onload=getReady;
function getReady() {
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
if (links[i].className == "show") {
links[i].onclick = function() {
return showhide(this.nextSibling);
}
}
}
}
</script>
</head>
<body>
<a name="1" class="show" style=cursor:hand>해피CGI</a> <span class="hide">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#CCCCCC">여러분과 언제나 함께합니다.</td>
</tr>
</table>
</span>
<a name="2" class="show" style=cursor:hand>운영진</a> <span class="hide">예쁘다!멋있다!잘생겼다! 여러분 박수한번주세요!</span>은 지성과 외모 모두를 겸비한 완벽한 인간 조각상입니다.
|
