//제이쿼리 선언
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
//이미지 class="rollover" 주면 자동 롤오버 class="rollover active" 마우스 오버되어있을떄 효과
// 주의사항 이미지명 뒤에 _off,_on으로 구분 주어야함
<img src="image01_off.jpg" class="rollover" />
<img src="image02_off.jpg" class="rollover active" />
<img src="image03_off.jpg" class="rollover" />
<img src="image04_off.jpg" class="rollover" />
<img src="image01_off.jpg" class="rollover" />
<img src="image02_off.jpg" class="rollover active" />
<img src="image03_off.jpg" class="rollover" />
<img src="image04_off.jpg" class="rollover" />
//스크립트는 하단에 호출 해주어야한다
<script type="text/javascript">
if ( $('img').hasClass('active') ){
$('img.active').attr('src', $('img.active').attr('src').split('_off.')[0] + '_on.' + $('img.active').attr('src').split('_off.')[1]);
}
$('img.rollover').mouseover(function(){
if ( !$(this).hasClass('active') ){
var image_name = $(this).attr('src').split('_off.')[0];
var image_type = $(this).attr('src').split('off.')[1];
$(this).attr('src', image_name + '_on.' + image_type);
}
}).mouseout(function(){
if ( !$(this).hasClass('active') ){
var image_name = $(this).attr('src').split('_on.')[0];
var image_type = $(this).attr('src').split('_on.')[1];
$(this).attr('src', image_name + '_off.' + image_type);
}
});
</script>
<script type="text/javascript">
if ( $('img').hasClass('active') ){
$('img.active').attr('src', $('img.active').attr('src').split('_off.')[0] + '_on.' + $('img.active').attr('src').split('_off.')[1]);
}
$('img.rollover').mouseover(function(){
if ( !$(this).hasClass('active') ){
var image_name = $(this).attr('src').split('_off.')[0];
var image_type = $(this).attr('src').split('off.')[1];
$(this).attr('src', image_name + '_on.' + image_type);
}
}).mouseout(function(){
if ( !$(this).hasClass('active') ){
var image_name = $(this).attr('src').split('_on.')[0];
var image_type = $(this).attr('src').split('_on.')[1];
$(this).attr('src', image_name + '_off.' + image_type);
}
});
</script>
이렇게 하면 쉽게 롤오버 버튼을 제작할수있습니다~
알고계셧다면 죄송..
댓글 5개
baek83
13년 전
ㄳㄳ
13년 전
감사합니다
13년 전
적용해 보겠습니다.
averkey
13년 전
감사합니다.
13년 전
오홍..감사합니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5330 | 13년 전 | 775 | ||
| 5329 | 13년 전 | 713 | ||
| 5328 | 13년 전 | 644 | ||
| 5327 | 13년 전 | 886 | ||
| 5326 |
downmix
|
13년 전 | 1124 | |
| 5325 |
techer
|
13년 전 | 3152 | |
| 5324 |
techer
|
13년 전 | 979 | |
| 5323 | 13년 전 | 1192 | ||
| 5322 |
김준수사랑
|
13년 전 | 901 | |
| 5321 |
다케미카코
|
13년 전 | 762 | |
| 5320 |
 cshop |
13년 전 | 1001 | |
| 5319 |
한번잘해보자
|
13년 전 | 1016 | |
| 5318 |
cshop |
13년 전 | 1276 | |
| 5317 |
techer
|
13년 전 | 2707 | |
| 5316 |
techer
|
13년 전 | 3152 | |
| 5315 | 13년 전 | 1181 | ||
| 5314 |
티즈코리아
|
13년 전 | 1233 | |
| 5313 | 13년 전 | 712 | ||
| 5312 |
cshop |
13년 전 | 1879 | |
| 5311 |
innis
|
13년 전 | 776 | |
| 5310 | 13년 전 | 864 | ||
| 5309 |
changho
|
13년 전 | 663 | |
| 5308 |
 raineye |
13년 전 | 1368 | |
| 5307 |
cshop |
13년 전 | 805 | |
| 5306 | 13년 전 | 1190 | ||
| 5305 |
세상속으로
|
13년 전 | 1169 | |
| 5304 | 13년 전 | 676 | ||
| 5303 | 13년 전 | 2264 | ||
| 5302 | 13년 전 | 1403 | ||
| 5301 | 13년 전 | 1116 | ||
| 5300 |
프로프리랜서
|
13년 전 | 1094 | |
| 5299 | 13년 전 | 877 | ||
| 5298 | 13년 전 | 685 | ||
| 5297 |
나랑사귈래
|
13년 전 | 613 | |
| 5296 | 13년 전 | 1343 | ||
| 5295 | 13년 전 | 1121 | ||
| 5294 | 13년 전 | 733 | ||
| 5293 |
 Terrorboy |
13년 전 | 5827 | |
| 5292 |
cshop |
13년 전 | 795 | |
| 5291 | 13년 전 | 623 | ||
| 5290 | 13년 전 | 562 | ||
| 5289 | 13년 전 | 657 | ||
| 5288 | 13년 전 | 1174 | ||
| 5287 | 13년 전 | 767 | ||
| 5286 | 13년 전 | 980 | ||
| 5285 | 13년 전 | 1330 | ||
| 5284 |
미스홍당무
|
13년 전 | 864 | |
| 5283 |
basketball
|
13년 전 | 1767 | |
| 5282 | 13년 전 | 798 | ||
| 5281 |
 엘남매아빠 |
13년 전 | 813 | |
| 5280 | 13년 전 | 1221 | ||
| 5279 | 13년 전 | 1389 | ||
| 5278 |
크라이스트
|
13년 전 | 2055 | |
| 5277 |
 아지야학교가자 |
13년 전 | 734 | |
| 5276 |
그누보드환자이송
|
13년 전 | 792 | |
| 5275 | 13년 전 | 707 | ||
| 5274 | 13년 전 | 1379 | ||
| 5273 | 13년 전 | 2008 | ||
| 5272 | 13년 전 | 1125 | ||
| 5271 | 13년 전 | 1438 | ||
| 5270 | 13년 전 | 811 | ||
| 5269 | 13년 전 | 534 | ||
| 5268 | 13년 전 | 671 | ||
| 5267 | 13년 전 | 1195 | ||
| 5266 | 13년 전 | 1860 | ||
| 5265 | 13년 전 | 1632 | ||
| 5264 |
크라이스트
|
13년 전 | 1213 | |
| 5263 |
 홈피공장장 |
13년 전 | 1266 | |
| 5262 |
제이티37
|
13년 전 | 589 | |
| 5261 |
 스마트파인드 |
13년 전 | 787 | |
| 5260 |
quenya
|
13년 전 | 2077 | |
| 5259 | 13년 전 | 713 | ||
| 5258 | 13년 전 | 735 | ||
| 5257 |
크라이스트
|
13년 전 | 4600 | |
| 5256 | 13년 전 | 1259 | ||
| 5255 | 13년 전 | 3273 | ||
| 5254 |
 몽키D팡야 |
13년 전 | 714 | |
| 5253 | 13년 전 | 774 | ||
| 5252 | 13년 전 | 776 | ||
| 5251 | 13년 전 | 733 | ||
| 5250 |
dudn1114
|
13년 전 | 1295 | |
| 5249 | 13년 전 | 675 | ||
| 5248 | 13년 전 | 743 | ||
| 5247 | 13년 전 | 2087 | ||
| 5246 | 13년 전 | 514 | ||
| 5245 | 13년 전 | 2201 | ||
| 5244 | 13년 전 | 1464 | ||
| 5243 |
엘남매아빠 |
13년 전 | 976 | |
| 5242 | 13년 전 | 771 | ||
| 5241 | 13년 전 | 1855 | ||
| 5240 |
 TopSchooL |
13년 전 | 511 | |
| 5239 | 13년 전 | 1039 | ||
| 5238 | 13년 전 | 1228 | ||
| 5237 | 13년 전 | 1124 | ||
| 5236 | 13년 전 | 592 | ||
| 5235 |
스마트파인드 |
13년 전 | 772 | |
| 5234 |
뭐먹고살지ㅠ
|
13년 전 | 1033 | |
| 5233 | 13년 전 | 3600 | ||
| 5232 | 13년 전 | 3144 | ||
| 5231 | 13년 전 | 3733 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기