이미지위에 마우스대면 나타나는 풍선도움말

 

 

 

 

 

<tr>

<td colspan=2 style='word-break:break-all;padding:10'>

     <span style=line-height:160%>

               <style type="text/css">

#tooltip {

position:absolute;

top:0;

left:0;

border:2 solid blue;    //도움말 테두리의 두께와 색을 지정합니다.

background:white;    //도움말의 배경색을 지정합니다.

color:blue;          //도움말 글자의 색을 지정합니다.

font-size:9pt;     //글자의 크기를 지정합니다.

width:384;          //테두리의 넓이를 지정합니다.

height:20;          //테두리의 높이를 지정합니다.

padding:2;

overflow:hidden;

z-index:10;

display:none;

}

</style>

<script language=javascript>

function showtip(text) {

tooltip.innerText=text;

tooltip.style.display="inline";

}

function hidetip() {

tooltip.style.display="none";

}

function movetip() {

tooltip.style.pixelTop=event.y+document.body.scrollTop;

tooltip.style.pixelLeft=event.x+document.body.scrollLeft+10;

}

document.onmousemove=movetip;

</script>

<span id=tooltip></span>

<span onmouseover="showtip('어서오세요~~세실리아의집 입니다.');this.style.cursor='eresize';"onmouseout="hidetip();">

<embed src="http://lia47.pe.kr/imegs/benar.swf" > </span>

<!--"<--><br>

     <div align=right style=font-family:verdana;font-size:7pt;></div>

     </span>

</td>

</tr>