tooltip을 대신해서 자바스크립트를 쓰려는데 잘 안되네요. 정보
tooltip을 대신해서 자바스크립트를 쓰려는데 잘 안되네요.본문
우선 <a href="" title="내용">이런식으로 title의 내용을 마우스 오버했을때 뜨게 할 수가 있는데요
이것을 빨리뜨게 하려고 레이어로 대체하려고 합니다.
(그냥 저대로는 빨리뜨게 하는 방법이 없는게 맞지요? 그렇다는 가정하에 질문합니다.)
레이어를 다음과 같은 방식으로 띄우잖아요?
========================================다음
<script>
function view(opt) {
if(opt) {
spec1.style.display = "block";
}
else {
spec1.style.display = "none";
}
}
</script>
<a href="#" onmouseover="view(true)" onmouseout="view(false)" style="text-decoration:none">도움말</a>
<div id="spec1" style="position:relative;display:none">
<table border="0" width="420" cellspacing="0" cellpadding="0">
<tr>
<td width="40"> </td>
<td width="380"><p>내용</p>
</td>
</tr>
</table>
</div>
============================================여기까지.
근데 이게 자체로는 잘 뜨는데 relative의 포지션으로 마우스 커서 근처에 딱 뜨는데
이게 그누보드안에다가 적용하려고 하면 그러니까 list부분에서 말이죠.
잘 안됩니다. 게시판 글목록이 끝나는 부분에 뜹니다. z-index같은 문제는 아닌것 같습니다.
list.skin.php를 보면 그냥 테이블로 작성되어 있는데 말이죠.
마우스 커서 근처에 레이어를 띄우고 싶습니다.
아 그리고 질문이 길어져서 죄송하지만 하나 더 여쭙자면
<a href="" title="내용">이런것처럼 간단하게 띄우는 방법은 없나요? 마우스를 올리자마자 뜨기만하면 됩니다. 위에 붙여넣은 내용은 줄도 길고 복잡하잖아요. 이걸 간소화한 방법이 궁금합니다.
답변 부탁드릴께요.!!
이것을 빨리뜨게 하려고 레이어로 대체하려고 합니다.
(그냥 저대로는 빨리뜨게 하는 방법이 없는게 맞지요? 그렇다는 가정하에 질문합니다.)
레이어를 다음과 같은 방식으로 띄우잖아요?
========================================다음
<script>
function view(opt) {
if(opt) {
spec1.style.display = "block";
}
else {
spec1.style.display = "none";
}
}
</script>
<a href="#" onmouseover="view(true)" onmouseout="view(false)" style="text-decoration:none">도움말</a>
<div id="spec1" style="position:relative;display:none">
<table border="0" width="420" cellspacing="0" cellpadding="0">
<tr>
<td width="40"> </td>
<td width="380"><p>내용</p>
</td>
</tr>
</table>
</div>
============================================여기까지.
근데 이게 자체로는 잘 뜨는데 relative의 포지션으로 마우스 커서 근처에 딱 뜨는데
이게 그누보드안에다가 적용하려고 하면 그러니까 list부분에서 말이죠.
잘 안됩니다. 게시판 글목록이 끝나는 부분에 뜹니다. z-index같은 문제는 아닌것 같습니다.
list.skin.php를 보면 그냥 테이블로 작성되어 있는데 말이죠.
마우스 커서 근처에 레이어를 띄우고 싶습니다.
아 그리고 질문이 길어져서 죄송하지만 하나 더 여쭙자면
<a href="" title="내용">이런것처럼 간단하게 띄우는 방법은 없나요? 마우스를 올리자마자 뜨기만하면 됩니다. 위에 붙여넣은 내용은 줄도 길고 복잡하잖아요. 이걸 간소화한 방법이 궁금합니다.
답변 부탁드릴께요.!!
댓글 전체

relative 쓰시는법..
<a style="position:relative;" href="#" onmouseover="view(true)" onmouseout="view(false)" style="text-decoration:none">
도움말
<div id="spec1" style="position:absolute;display:none; right:0px; bottom:0px;">
<tr>
<td width="40"> </td>
<td width="380"><p>내용</p>
</td>
</tr>
</table>
</div>
</a>
이렇게 하면 "도움말" 글씨 바로 오른쪽 아래에 표시됩니다.
right, bottom을 적당히 조절하시면 자연스런 위치에 표시됩니다.
마우스 커서에 표시되는 것 보다는 "도움말" 글자 근처에 일정한 위치에 표시되는 것 이 좋을것 같습니다.
<a style="position:relative;" href="#" onmouseover="view(true)" onmouseout="view(false)" style="text-decoration:none">
도움말
<div id="spec1" style="position:absolute;display:none; right:0px; bottom:0px;">
<tr>
<td width="40"> </td>
<td width="380"><p>내용</p>
</td>
</tr>
</table>
</div>
</a>
이렇게 하면 "도움말" 글씨 바로 오른쪽 아래에 표시됩니다.
right, bottom을 적당히 조절하시면 자연스런 위치에 표시됩니다.
마우스 커서에 표시되는 것 보다는 "도움말" 글자 근처에 일정한 위치에 표시되는 것 이 좋을것 같습니다.
잘 이해가 안되는데요? style에는 relative를 쓰고 div style에는 absolute를 쓰는 이유는 뭐지요..?
실제로 실행해보니까 익스플로러 가장 오른쪽 밑에 나타납니다. 명쾌한 답변 부탁드려요.^^
실제로 실행해보니까 익스플로러 가장 오른쪽 밑에 나타납니다. 명쾌한 답변 부탁드려요.^^

<script>
function view(opt) {
if(opt) {
document.getElementById("spec1").style.display = "";
}
else {
document.getElementById("spec1").style.display = "none";
}
}
</script>
<span style="position:relative; background-color:#ccc;">
<a href="#" onmouseover="view(true)" onmouseout="view(false)" style="text-decoration:none">도움말</a>
<div id="spec1" style="position:absolute; display:none; right:-1.7em; bottom:-1.2em;">내용</div>
</span>
==============================================================
<a 태그 안에 div를 넣으니 툴팁에도 링크가 생겨서 span태그를 하나더 넣었습니다.
relative 를 사용하는 방법은..
<div id=1 style="position:relative;">
<div id=2 style="position:absolute;"></div>
</div>
위와 같이 선언 되었을 경우에 2번 div에 효과가 적용됩니다.
즉 1번 아이디에 대해 상대적으로 좌표를 지정하겠다는 뜻이죠.
즉 1번 엘리먼트가 어느위치에 있건 2번 엘리먼트는 1번에 상대적으로 위치를 잡게 됩니다.
꼭 1번에는 relative 2번에는 absolute를 적용해야 합니다.
absolute는 relative안에 있어야 효과가 나타납니다.
만약 absolute가 밖에 있으면 그건 전체화면에 대해서 상대적인 위치를 지정 하는 것이죠.
function view(opt) {
if(opt) {
document.getElementById("spec1").style.display = "";
}
else {
document.getElementById("spec1").style.display = "none";
}
}
</script>
<span style="position:relative; background-color:#ccc;">
<a href="#" onmouseover="view(true)" onmouseout="view(false)" style="text-decoration:none">도움말</a>
<div id="spec1" style="position:absolute; display:none; right:-1.7em; bottom:-1.2em;">내용</div>
</span>
==============================================================
<a 태그 안에 div를 넣으니 툴팁에도 링크가 생겨서 span태그를 하나더 넣었습니다.
relative 를 사용하는 방법은..
<div id=1 style="position:relative;">
<div id=2 style="position:absolute;"></div>
</div>
위와 같이 선언 되었을 경우에 2번 div에 효과가 적용됩니다.
즉 1번 아이디에 대해 상대적으로 좌표를 지정하겠다는 뜻이죠.
즉 1번 엘리먼트가 어느위치에 있건 2번 엘리먼트는 1번에 상대적으로 위치를 잡게 됩니다.
꼭 1번에는 relative 2번에는 absolute를 적용해야 합니다.
absolute는 relative안에 있어야 효과가 나타납니다.
만약 absolute가 밖에 있으면 그건 전체화면에 대해서 상대적인 위치를 지정 하는 것이죠.
이상하네요 이번엔 마우스 오버해도 아무것도 안떠서요.
자꾸 죄송하네요. 제가 자바스크립트에 너무 문외한이라 못하는거 같기도 하구요.
해결은 못하고 있긴 한데.. 여튼 답변 감사합니다.^^
자꾸 죄송하네요. 제가 자바스크립트에 너무 문외한이라 못하는거 같기도 하구요.
해결은 못하고 있긴 한데.. 여튼 답변 감사합니다.^^