<body>안에 추가사항: <div id='preview' style='visibility=hidden; position:absolute; left:78px; top:165px; width:200px; height:62px; z-index:1; border-width:1px; border-style:none; filter:progid:DXImageTransform.Microsoft.Shadow(color=#4B4B4B,Direction=135,Strength=3);border-color:black;'></div>
image 태그에 mouse 이벤트만 주시면, 이쁜 옵져버(미리보기 ^^;;)가 나타 날 겁니다.
<a href = '#' onmousemove='setPreviewBox();' onmouseout='hidePreview(); return true;' onmouseover='showPreview("<img src = "+파일경로 + URLEncoder.encode(파일명, "UTF-8") + " border = 0 width = 205 height = 154>";); return true;'> <img src = " + 파일경로 + URLEncoder.encode(파일명, "UTF-8") + " border = 0 width = 40 height = 30></a>
(URLEncoder를 사용하는 이유는 한글명 파일을 사용하기 위해서 입니다. 사이트 검색해보시면 상세한 이유를 아실 것이구요. 스크립트 덩치가 작아서 쉽게 이해 하실 겁니다.)
작은 이미지 적당한 크기로 미리보기 할 때 유용합니다. ^^*
자바스크립트 파일
function setPreviewBox(){
preview.style.posLeft = event.x + 30 + document.body.scrollLeft;
preview.style.posTop = event.y - 30 + document.body.scrollTop;
}
function showPreview(content){
if(content!="")
{
var text;
text ='<table cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" border-style:solid;">';
text += '<tr align = center><td>' + content + '</td></tr></table>';
preview.innerHTML=text;
preview.style.visibility='visible';
}
}
function hidePreview(){
preview.innerHTML='';
preview.style.visibility='hidden';
}
