마우스 오버시 레이어 보이게 하는 팁입니다.
버튼 하나에 레이어 하나 이렇게만 만들다가
지금 작업중인 사이트는 버튼이랑 설명레이어가 여러개가 되길래 만들어봤습니다.
<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년 전 | 978 | ||
| 6429 | 12년 전 | 9102 | ||
| 6428 | 12년 전 | 601 | ||
| 6427 |
제이티37
|
12년 전 | 1569 | |
| 6426 |
프로프리랜서
|
12년 전 | 1154 | |
| 6425 |
프로프리랜서
|
12년 전 | 1608 | |
| 6424 |
프로프리랜서
|
12년 전 | 1811 | |
| 6423 | 12년 전 | 1000 | ||
| 6422 |
퍼블리셔지노군
|
12년 전 | 1573 | |
| 6421 | 12년 전 | 2207 | ||
| 6420 |
 신현종실장 |
12년 전 | 1334 | |
| 6419 |
 돼지코구뇽 |
12년 전 | 1287 | |
| 6418 | 12년 전 | 1182 | ||
| 6417 |
senseme
|
12년 전 | 7420 | |
| 6416 |
senseme
|
12년 전 | 1328 | |
| 6415 |
senseme
|
12년 전 | 1190 | |
| 6414 |
senseme
|
12년 전 | 1968 | |
| 6413 |
senseme
|
12년 전 | 973 | |
| 6412 |
senseme
|
12년 전 | 1490 | |
| 6411 |
senseme
|
12년 전 | 1099 | |
| 6410 |
senseme
|
12년 전 | 1045 | |
| 6409 |
PASKRAN
|
12년 전 | 2818 | |
| 6408 | 12년 전 | 10798 | ||
| 6407 | 12년 전 | 2990 | ||
| 6406 |
프로프리랜서
|
12년 전 | 2833 | |
| 6405 |
프로프리랜서
|
12년 전 | 1371 | |
| 6404 |
프로프리랜서
|
12년 전 | 2724 | |
| 6403 |
프로프리랜서
|
12년 전 | 818 | |
| 6402 |
프로프리랜서
|
12년 전 | 1731 | |
| 6401 |
프로프리랜서
|
12년 전 | 1139 | |
| 6400 |
프로프리랜서
|
12년 전 | 1464 | |
| 6399 |
프로프리랜서
|
12년 전 | 1179 | |
| 6398 |
프로프리랜서
|
12년 전 | 1487 | |
| 6397 |
프로프리랜서
|
12년 전 | 3603 | |
| 6396 | 12년 전 | 1870 | ||
| 6395 | 12년 전 | 920 | ||
| 6394 |
신현종실장 |
12년 전 | 5240 | |
| 6393 |
제이티37
|
12년 전 | 1202 | |
| 6392 |
songsinica
|
12년 전 | 1205 | |
| 6391 |
 카카오툴즈 |
12년 전 | 3384 | |
| 6390 |
 cshop2 |
12년 전 | 1625 | |
| 6389 | 12년 전 | 4858 | ||
| 6388 |
스누피사랑
|
12년 전 | 5431 | |
| 6387 | 12년 전 | 1838 | ||
| 6386 | 12년 전 | 3059 | ||
| 6385 |
희망과열정
|
12년 전 | 926 | |
| 6384 | 12년 전 | 3292 | ||
| 6383 | 12년 전 | 10599 | ||
| 6382 |
신현종실장 |
12년 전 | 5790 | |
| 6381 |
SugarSkull
|
12년 전 | 1031 | |
| 6380 | 12년 전 | 777 | ||
| 6379 |
 hy미디어 |
12년 전 | 1984 | |
| 6378 | 12년 전 | 1562 | ||
| 6377 | 12년 전 | 497 | ||
| 6376 |
후라보노보노
|
12년 전 | 1332 | |
| 6375 | 12년 전 | 2867 | ||
| 6374 | 12년 전 | 834 | ||
| 6373 | 12년 전 | 2367 | ||
| 6372 |
takumi22
|
12년 전 | 1240 | |
| 6371 |
개초보제이
|
12년 전 | 773 | |
| 6370 |
고급자가되고
|
12년 전 | 1461 | |
| 6369 | 12년 전 | 883 | ||
| 6368 | 12년 전 | 3180 | ||
| 6367 | 12년 전 | 1880 | ||
| 6366 | 12년 전 | 2878 | ||
| 6365 |
lilyosia
|
12년 전 | 1795 | |
| 6364 | 12년 전 | 1057 | ||
| 6363 | 12년 전 | 1588 | ||
| 6362 | 12년 전 | 2734 | ||
| 6361 | 12년 전 | 2558 | ||
| 6360 | 12년 전 | 1005 | ||
| 6359 | 12년 전 | 2104 | ||
| 6358 |
 gilynh |
12년 전 | 1787 | |
| 6357 |
에헤라디야자진방아를돌려라
|
12년 전 | 778 | |
| 6356 | 12년 전 | 2086 | ||
| 6355 | 12년 전 | 3787 | ||
| 6354 | 12년 전 | 3101 | ||
| 6353 | 12년 전 | 1546 | ||
| 6352 | 12년 전 | 7769 | ||
| 6351 | 12년 전 | 2539 | ||
| 6350 | 12년 전 | 2798 | ||
| 6349 | 12년 전 | 1880 | ||
| 6348 | 12년 전 | 3546 | ||
| 6347 | 12년 전 | 1447 | ||
| 6346 | 12년 전 | 1185 | ||
| 6345 | 12년 전 | 1835 | ||
| 6344 | 12년 전 | 1413 | ||
| 6343 |
프로프리랜서
|
12년 전 | 2059 | |
| 6342 |
프로프리랜서
|
12년 전 | 1382 | |
| 6341 |
프로프리랜서
|
12년 전 | 1812 | |
| 6340 |
프로프리랜서
|
12년 전 | 1899 | |
| 6339 |
프로프리랜서
|
12년 전 | 1340 | |
| 6338 |
프로프리랜서
|
12년 전 | 1595 | |
| 6337 | 12년 전 | 5267 | ||
| 6336 |
프로프리랜서
|
12년 전 | 1629 | |
| 6335 |
프로프리랜서
|
12년 전 | 951 | |
| 6334 |
프로프리랜서
|
12년 전 | 1328 | |
| 6333 |
프로프리랜서
|
12년 전 | 2441 | |
| 6332 | 12년 전 | 1102 | ||
| 6331 |
돗단배123
|
12년 전 | 1421 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기