Template

글쓴사람

양요한

글쓴시간

2004년 3월 18일 오후 6시 25분 37초

제목

[질문] 템플릿 질문은 아니고요... javascript.. ^^;

안녕하세요 박형길님

우연히 관리자님께서 만드시 Rollover 스크립트를 봤드랬습니다.
와우~ 굉장하던데요... 자바스크립트를 그렇게 쓰는건 첨 봤습니다.
역쉬~ 언제나 나이스 하신 분이라니깐 !!

그래서 저도 연습 삼아 밑에꺼 만들어봤습니다.
Tooltip 인데요... 태그에 tip 속성 넣으면 툴팁으로 나오는겁니다.
대충 거의 됐는데요 ... 추가 하고 싶은게.... 밑에 함수중에 createTipbox 라고 있어요
그게 툴팁 보여줄 div를 문서에 추가하는건데...
document.write 를 쓰니까 기존 문서는 다 지워지고 새로 쓰는 코드만 남네요

기존의 무선에 추가로..... HTML 코드 추가하는 건 어떻게 하나요 ?
그게 가능하면 특정위치에 코드를 삽입하는것도 가능할까요 ?

날씨가 또 추워졌네요 ... ㅠㅠ
감기조심하세요..

---------- 소스 ----------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="description" content="">
<meta name="keywords" content="">
<title>NO TITLE</title>
<style type="text/css">
</style>
<script language="javascript">
Tooltip = function(){
if (!document.body.getAttribute) return false;
this.idTooltip = "tooltip";
this.tooltip = document.getElementById(this.idTooltip);
this.offsetX = this.offsetY = 10;
if (document.getElementsByTagName)
{
this.init(document.getElementsByTagName("a"));
this.init(document.getElementsByTagName("img"));
this.init(document.getElementsByTagName("div"));
this.init(document.getElementsByTagName("span"));
this.init(document.getElementsByTagName("input"));
}
//this.createTipbox();
}
Tooltip.prototype.createTipbox = function(){
/*
document.write(
"<style type='text/css'>" +
"#" + this.idTooltip + "{" +
"width:100px" +
"heihgt:40px" +
"background-color:yellow" +
"}" +
"</style>"
);
document.write("<div id='" + this.idTooltip + "' style='display:none'></div>");
*/
}
Tooltip.prototype.init = function(){
Tooltip.object = this;
Tooltip.element = null;
for (var i=0, s=arguments[0].length; i<s; i++)
{
Tooltip.element = arguments[0][i];
if (arguments[0][i].getAttribute("tip") !== null)
{
arguments[0][i].onmouseover = function(){
Tooltip.object.show(event.srcElement, event.x, event.y);
}
arguments[0][i].onmousemove = function(){
Tooltip.object.move(event.x, event.y);
}
arguments[0][i].onmouseout = function(){
Tooltip.object.hide();
}
}
}
}
Tooltip.prototype.show = function(source, x, y)
{
this.tooltip.innerHTML = source.getAttribute("tip");
this.tooltip.style.display = "inline";
this.move(x,y);
}
Tooltip.prototype.move = function(x, y)
{
var width = this.tooltip.clientWidth;
var height = this.tooltip.clientHeihgt;
var cx = document.body.clientWidth;
var cy = document.body.clientHeight;
var sy = document.body.scrollTop;
var tx = x + this.offsetX;
var ty = y + this.offsetY + sy;
if (tx + width >= cx) tx -= (tx + width - cx);
if (ty + height >= cy + sy) ty -= (ty + height - (cy+sy));

this.tooltip.style.left = tx;
this.tooltip.style.top = ty;
}
Tooltip.prototype.hide = function()
{
this.tooltip.innerHTML = "";
this.tooltip.style.display = "none";
}
</script>
<style type="text/css">
#tooltip
{
padding: 3px;
position: absolute;
background-color: white;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
border-style: solid;
border-color: black;
border-width: 1px;
font-family: verdana;
font-size: 9pt;
line-height: 170%;
}
</style>
</head>
<body onLoad="new Tooltip">
<div id="tooltip" style="display:none"></div>
<a href="aaa" tip="a tag">aaa</a><br>
<img src="" width="300" height="30" tip="aaa">
<input type="button" value="버튼" tip="눌르세요~~~~~">
</body>
</html>

양요한

추가로... 자바스크립트 레퍼런스 가벼운거 어디 없나요?
MSDN 에서 받은 Platform SDK 로 보고 있는데
너무 무겁고...느리고... 내용은 훌륭하지만....
자바스크립트만 들어있는 ... 가볍게... 볼 수 있는거 어디 없을까요?

04-03-18 18:41

관리자

var box=document.createElement("div");
// box 속성 설정..
document.body.appendChild(box);

document.write() 대신 이런 식으로 해보시면 될거 같네요. 참고서적이나 싸이트추천에 대해서는 늘.. 뜻이 있는 곳에 길이 있을거 같다는 답변밖에 못드리는 점 양해 바랍니다;

그리고 rollover 소스는 그 당시 나름대로 이유가 있어서 참여했던 것인데, 개인적으로 이 게시판 외에 온라인 활동은 안하는 것을 원칙으로 하고 있습니다. 템플릿에 관련된 질문만 해주시기 바라며.. 금방 잘 만드셨네요.^^

04-03-19 00:08

이름
비밀번호

Since 2003-03-03 hosted on vultr.com