설명 : 마우스를 특정 개체위로 가져갈 때 그 개체를 설명하는 글이 뜨게 만드는 것이다.
일반적으로 이미지 태그 내의 alt를 자주 이용하는데 이것은 단순한 글자 몇자만 쓸 수 있지 특별한 기능을 넣을 수 없다.
여기서는 DHTML을 이용하여 마우스 이벤트를 받아 div 태그내에 설명문 HTML을 동적으로 생성하도록 만들었다. 물론 마우스 움직임에 따라 함께 움직이도록 하는 기능도 넣었다.
아래에 샘플 코드를 써봤음.
<html>
<head>
<basefont size="2">
</head>
<body>
<div id="overDiv" style="position:absolute; left:10px; top:10px; width:200px; height:200px; z-index:2; visibility:hidden; border-width:1px; border-style:none;"></div>
<script language="Javascript">
<!--//
var ns4 = (document.layers) ? true : false;
var ie4 = (document.all) ? true : false;
if (ie4) {
if (navigator.userAgent.indexOf('MSIE 5') > 0) {
var ie5 = true;
}
else {
var ie5 = false;
}
}
else {
var ie5 = false;
}
var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var width = 260;
if ( (ns4) || (ie4) ) {
if (ns4) var over = document.overDiv;
if (ie4) var over = document.all["overDiv"].style;
document.onmousemove = mouseMove;
if (ns4) document.captureEvents(Event.MOUSEMOVE);
}
function mouseMove(e) {
if (ns4) {x=e.pageX; y=e.pageY;}
if (ie4) {x=event.x; y=event.y;}
if (ie5) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
if ( x <= width/2 ) x = width/2 + 3;
else if ( (x + width/2) >= pageSize("LS") ) x = pageSize("LS") - width/2;
if (snow) { moveTo(over,x-(width/2),y+18); }
}
function noview() {
if ( cnt >= 1 ) { sw = 0 };
if ( (ns4) || (ie4) ) {
if ( sw == 0 ) {
snow = 0;
hideObject(over);
} else {
cnt++;
}
}
}
function view(content,title) {
txt = "<table border cellpadding=\"2\" cellspacing=\"0\" width=\""+width+"\" bgcolor=\"#F9F9F2\">";
txt = txt+"<tr><td width=\"100%\" align=\"center\" bgcolor=\"#BFC4EA\" class=\"bfont\"><p>" + title + "</td></tr>";
txt = txt+"<tr><td class=\"bfont\"><p>" + content + "</td></tr></table>";
layerWrite(txt);
txt="";
disp();
}
function disp() {
if ( (ns4) || (ie4) ) {
if (snow == 0) {
if ( x <= width/2 ) x = width/2 + 3;
else if ( (x + width/2) >= pageSize("LS") ) x = pageSize("LS") - width/2;
moveTo(over,x-(width/2),y+55);
showObject(over);
snow = 1;
}
}
}
function cClick() {
hideObject(over);
sw=0;
}
function layerWrite(txt) {
if(ns4) {
var lyr = document.overDiv.document;
lyr.write(txt);
lyr.close();
} else if(ie4) document.all["overDiv"].innerHTML = txt;
}
function showObject(obj) {
if (ns4) obj.visibility = "show";
else if (ie4) obj.visibility = "visible";
}
function hideObject(obj) {
if (ns4) obj.visibility = "hide";
else if (ie4) obj.visibility = "hidden";
}
function moveTo(obj,xL,yL) {
obj.left = xL;
obj.top = yL;
}
function pageSize(leftOrTop) {
if(ns4) {
var leftBar=topBar=0;
var returnValue = null;
if(self != parent) {
leftBar = 4;
topBar = 4;
if(document.width > window.innerWidth+4) topBar += -16;
if(document.height > window.innerHeight+4) leftBar += -16;
}
else {
if(document.width > window.innerWidth) topBar += -16;
if(document.height > window.innerHeight) leftBar += -16;
}
if(leftOrTop == "LS") returnValue = window.innerWidth + leftBar;
if(leftOrTop == "TS") returnValue = window.innerHeight + topBar;
}
else if(ie4) {
if(leftOrTop == "LS") returnValue = document.body.clientWidth;
if(leftOrTop == "TS") returnValue = document.body.clientHeight;
}
return returnValue;
}
//-->
</script>
<table width=300 border=1 cellpadding=0 cellspacing=0 bordercolorlight="#000000" bordercolordark="#FFFFFF">
<tr bgcolor="#EE8844">
<td align=middle><a href="#" onmouseout="noview()"
onmouseover="view('첫번째 메뉴를 보고 계십니다.<br>이렇게 되는게 신기하시죠?', '<b>첫번째 메뉴</b>')"> 첫번째 메뉴 </a></td>
</tr>
<tr bgcolor="#EE8844">
<td align=middle><a href="#" onmouseout="noview()"
onmouseover="view('두번째 메뉴를 보고 계십니다.<br>이렇게 되는게 안 신기하다구요?', '<b>두번째 메뉴</b>')"> 두번째 메뉴 </a></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
요즘은 거의 IE를 사용하기 때문에 굳이 브라우저 종류에 대한 선택적 옵션을 쓸 필요는 없지만 그래도 아주 가끔씩은 필요할 수도 있어 넣었다.(그래서 소스가 좀 길고 지저분해지긴 했지만... ^^;)
'Tech: > HTML·DHTML' 카테고리의 다른 글
| 움직이는 타이틀(제목 표시줄) 표현... (0) | 2008.06.26 |
|---|---|
| META 태그 설명 (0) | 2008.06.26 |
| 브라우저 아래의 상태표시줄에 현재 시각을!!! (0) | 2008.06.26 |
| 웹에서 마우스 오른쪽 버튼을 못쓰게 하기(2) (0) | 2008.06.26 |
| 웹 페이지의 아이콘(Favicon) 설정 (0) | 2008.06.26 |
