마우스오버시 말풍선을 레이어로 만들어 투명도,폰트컬러등을 적용하기
<html>
<head>
<script language="JavaScript">
<!--
function alt( msg, _width, _height ){
var _style = alt_div.style;
if( msg != null ){
alt_div.innerHTML = msg;
_style.visibility = "visible";
if( _width != null ){
if( alt_div.offsetWidth > _width ){
_style.width = _width;
}
}
if( _height != null ){
if( alt_div.offsetHeight > _height ){
_style.height = _height;
}
}
}else{
_style.visibility = "hidden";
}
}
document.write(
"<div id=alt_div style=\"" +
"padding:2;" +
"border:1 solid #FF7200;" + // 말풍선 테두리 컬러
"background-color:#F7F7F7;color:#000;" + // 말풍선 테이블 백그라운드컬러 / 폰트컬러
"position:absolute;" +
"visibility:hidden;" +
"overflow:hidden;" +
"z-index:auto;" +
"width:auto;" +
"height:auto;" +
"filter:alpha(opacity=60);" + // 투명도
"\"></div>"
);
document.onmousemove = get_xy;
function get_xy(){
var _style = alt_div.style;
var x = event.x + document.body.scrollLeft;
var y = event.y + document.body.scrollTop;
_style.left = x + 10;
_style.top = y + 10;
}
//-->
</script>
</head>
<body>
<a href=# onmouseover="alt( '테스트용 말풍선 입니다.<br>말풍선이 생겼나요?<p>생겼으면 말해주세요.' )" onmouseout="alt()">마우스 올려봐요.</a><p>
레이어에 투명도를 주었군요.ㅎㅎ
</body>
</html>
'컴퓨터-유용한팁 > 스크립트' 카테고리의 다른 글
| 스크롤바의 색상에 그라디언트를 (0) | 2015.09.07 |
|---|---|
| 문서 열림과 동시에 팝업띄우기 (0) | 2015.09.07 |
| 이미지 싸이즈대로 새창띄우면서 풍선도움말 넣고, 창닫기 (0) | 2015.09.07 |
| D-Day 까지 남은 시간 (0) | 2015.09.07 |
| 팝업링크 누르면 페이지가 나타나며 팝업은 사라집니다 (0) | 2015.09.07 |