마우스 오버시 레이어 보이게 하는 팁입니다.
버튼 하나에 레이어 하나 이렇게만 만들다가
지금 작업중인 사이트는 버튼이랑 설명레이어가 여러개가 되길래 만들어봤습니다.
<style type="text/css">
.help_btn{cursor:pointer;}
#help_div_0{display:none; position:absolute; left:0px; top:-210px;}
#help_div_1{display:none; position:absolute; left:80px; top:-210px;}
#help_div_2{display:none; position:absolute; left:185px; top:-210px;}
</style>
<div style="position:relative">
<input type="radio">라디오1 <img src="img/icon_help.gif" class="help_btn">
<input type="radio">라디오2 <img src="img/icon_help.gif" class="help_btn">
<input type="radio">라디오3 <img src="img/icon_help.gif" class="help_btn">
<div id="help_div_0">설명 1</div>
<div id="help_div_1">설명 2</div>
<div id="help_div_2">설명 3</div>
</div>
<script>
$(".help_btn").each(function(index) {
$(this).mouseover(function() {
$("#help_div_" + index).css("display", "block");
});
$(this).mouseout(function() {
$("#help_div_" + index).css("display", "none");
});
});
</script>
더 응용하면 레이어 위치까지도 제어할 수 있을 듯 하네요~
파이어폭스, ie8 만 테스트해봤습니다.
버튼 하나에 레이어 하나 이렇게만 만들다가
지금 작업중인 사이트는 버튼이랑 설명레이어가 여러개가 되길래 만들어봤습니다.
<style type="text/css">
.help_btn{cursor:pointer;}
#help_div_0{display:none; position:absolute; left:0px; top:-210px;}
#help_div_1{display:none; position:absolute; left:80px; top:-210px;}
#help_div_2{display:none; position:absolute; left:185px; top:-210px;}
</style>
<div style="position:relative">
<input type="radio">라디오1 <img src="img/icon_help.gif" class="help_btn">
<input type="radio">라디오2 <img src="img/icon_help.gif" class="help_btn">
<input type="radio">라디오3 <img src="img/icon_help.gif" class="help_btn">
<div id="help_div_0">설명 1</div>
<div id="help_div_1">설명 2</div>
<div id="help_div_2">설명 3</div>
</div>
<script>
$(".help_btn").each(function(index) {
$(this).mouseover(function() {
$("#help_div_" + index).css("display", "block");
});
$(this).mouseout(function() {
$("#help_div_" + index).css("display", "none");
});
});
</script>
더 응용하면 레이어 위치까지도 제어할 수 있을 듯 하네요~
파이어폭스, ie8 만 테스트해봤습니다.
댓글 2개
12년 전
감사합니다~~
takumi22
12년 전
감사합니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6430 | 12년 전 | 990 | ||
| 6429 | 12년 전 | 9114 | ||
| 6428 | 12년 전 | 609 | ||
| 6427 |
제이티37
|
12년 전 | 1576 | |
| 6426 |
프로프리랜서
|
12년 전 | 1160 | |
| 6425 |
프로프리랜서
|
12년 전 | 1618 | |
| 6424 |
프로프리랜서
|
12년 전 | 1820 | |
| 6423 | 12년 전 | 1008 | ||
| 6422 |
퍼블리셔지노군
|
12년 전 | 1583 | |
| 6421 | 12년 전 | 2215 | ||
| 6420 |
 신현종실장 |
12년 전 | 1339 | |
| 6419 |
 돼지코구뇽 |
12년 전 | 1290 | |
| 6418 | 12년 전 | 1194 | ||
| 6417 |
senseme
|
12년 전 | 7435 | |
| 6416 |
senseme
|
12년 전 | 1334 | |
| 6415 |
senseme
|
12년 전 | 1201 | |
| 6414 |
senseme
|
12년 전 | 1975 | |
| 6413 |
senseme
|
12년 전 | 978 | |
| 6412 |
senseme
|
12년 전 | 1494 | |
| 6411 |
senseme
|
12년 전 | 1109 | |
| 6410 |
senseme
|
12년 전 | 1050 | |
| 6409 |
PASKRAN
|
12년 전 | 2822 | |
| 6408 | 12년 전 | 10808 | ||
| 6407 | 12년 전 | 2996 | ||
| 6406 |
프로프리랜서
|
12년 전 | 2844 | |
| 6405 |
프로프리랜서
|
12년 전 | 1381 | |
| 6404 |
프로프리랜서
|
12년 전 | 2729 | |
| 6403 |
프로프리랜서
|
12년 전 | 825 | |
| 6402 |
프로프리랜서
|
12년 전 | 1748 | |
| 6401 |
프로프리랜서
|
12년 전 | 1151 | |
| 6400 |
프로프리랜서
|
12년 전 | 1479 | |
| 6399 |
프로프리랜서
|
12년 전 | 1195 | |
| 6398 |
프로프리랜서
|
12년 전 | 1500 | |
| 6397 |
프로프리랜서
|
12년 전 | 3610 | |
| 6396 | 12년 전 | 1884 | ||
| 6395 | 12년 전 | 927 | ||
| 6394 |
신현종실장 |
12년 전 | 5244 | |
| 6393 |
제이티37
|
12년 전 | 1209 | |
| 6392 |
songsinica
|
12년 전 | 1220 | |
| 6391 |
 카카오툴즈 |
12년 전 | 3403 | |
| 6390 |
 cshop2 |
12년 전 | 1636 | |
| 6389 | 12년 전 | 4871 | ||
| 6388 |
스누피사랑
|
12년 전 | 5440 | |
| 6387 | 12년 전 | 1845 | ||
| 6386 | 12년 전 | 3072 | ||
| 6385 |
희망과열정
|
12년 전 | 935 | |
| 6384 | 12년 전 | 3302 | ||
| 6383 | 12년 전 | 10609 | ||
| 6382 |
신현종실장 |
12년 전 | 5798 | |
| 6381 |
SugarSkull
|
12년 전 | 1037 | |
| 6380 | 12년 전 | 787 | ||
| 6379 |
 hy미디어 |
12년 전 | 1995 | |
| 6378 | 12년 전 | 1578 | ||
| 6377 | 12년 전 | 506 | ||
| 6376 |
후라보노보노
|
12년 전 | 1344 | |
| 6375 | 12년 전 | 2876 | ||
| 6374 | 12년 전 | 845 | ||
| 6373 | 12년 전 | 2377 | ||
| 6372 |
takumi22
|
12년 전 | 1247 | |
| 6371 |
개초보제이
|
12년 전 | 783 | |
| 6370 |
고급자가되고
|
12년 전 | 1467 | |
| 6369 | 12년 전 | 892 | ||
| 6368 | 12년 전 | 3190 | ||
| 6367 | 12년 전 | 1884 | ||
| 6366 | 12년 전 | 2887 | ||
| 6365 |
lilyosia
|
12년 전 | 1803 | |
| 6364 | 12년 전 | 1064 | ||
| 6363 | 12년 전 | 1600 | ||
| 6362 | 12년 전 | 2745 | ||
| 6361 | 12년 전 | 2570 | ||
| 6360 | 12년 전 | 1016 | ||
| 6359 | 12년 전 | 2106 | ||
| 6358 |
 gilynh |
12년 전 | 1795 | |
| 6357 |
에헤라디야자진방아를돌려라
|
12년 전 | 790 | |
| 6356 | 12년 전 | 2095 | ||
| 6355 | 12년 전 | 3798 | ||
| 6354 | 12년 전 | 3106 | ||
| 6353 | 12년 전 | 1556 | ||
| 6352 | 12년 전 | 7776 | ||
| 6351 | 12년 전 | 2545 | ||
| 6350 | 12년 전 | 2804 | ||
| 6349 | 12년 전 | 1889 | ||
| 6348 | 12년 전 | 3557 | ||
| 6347 | 12년 전 | 1455 | ||
| 6346 | 12년 전 | 1202 | ||
| 6345 | 12년 전 | 1842 | ||
| 6344 | 12년 전 | 1423 | ||
| 6343 |
프로프리랜서
|
12년 전 | 2066 | |
| 6342 |
프로프리랜서
|
12년 전 | 1395 | |
| 6341 |
프로프리랜서
|
12년 전 | 1825 | |
| 6340 |
프로프리랜서
|
12년 전 | 1914 | |
| 6339 |
프로프리랜서
|
12년 전 | 1358 | |
| 6338 |
프로프리랜서
|
12년 전 | 1621 | |
| 6337 | 12년 전 | 5284 | ||
| 6336 |
프로프리랜서
|
12년 전 | 1642 | |
| 6335 |
프로프리랜서
|
12년 전 | 958 | |
| 6334 |
프로프리랜서
|
12년 전 | 1339 | |
| 6333 |
프로프리랜서
|
12년 전 | 2448 | |
| 6332 | 12년 전 | 1105 | ||
| 6331 |
돗단배123
|
12년 전 | 1428 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기