토글이나 마우스업다운 이용하여 이미지 변경
본문
14개의 배너같은 이미지가 있는데
1번배너(img/1.jpg) 클릭하면 (img/1_on.jpg)가 나오고
on인 상태(img/1_on.jpg)에서 한번 더 클릭하면 처음1배너(img/1.jpg)가 나오게 하고 싶은데요.
배너가 14개정도가 되어서 한번에 스크립트로 처리해주고 싶어서요~
img/14.jpg / img/14_on.jpg 까지 있어요~
제가 정말 초보라..ㅠㅠ 엄청 간단한거 같은데 하려니 잘 안되어서요ㅠ
답변 부탁드리겠습니다.
감사합니다~
답변 2
css 로 쉽게 가능합니다.
<style type="text/css">
<?php $bannerunit = '14'; // 배너갯수
for ($i=1; $i <= $bannerunit; $i++) { ?>
.banner_<?php echo $i ?> { background:url(./img/banner_<?php echo $i ?>.png); }
.banner_<?php echo $i ?>:hover { background:url(./img/banner_on_<?php echo $i ?>.png); }
<?php } ?>
</style>
banner_1 클래스 부여시 banner_1.png 배경이되며 해당이미지 오버시 banner_on_1.png 가 보여지게 됩니다.
답변 너무 감사합니다~
그럼 아래엔
이렇게만 넣으면 되는걸까요?
<div class="banner_01"></div>
<div class="banner_02"></div>
<div class="banner_03"></div>
<div class="banner_04"></div>
<div class="banner_05"></div>
...
배너갯수를 원하시는 형태로 맞춰주시고
클래스는 01 부터 시작이 아닌 1,2,3,4,5,6 이런식으로 1자리 숫자는 0을 빼주세요~~
