묻고답하기
클릭했을때 이미지 변경하는 방법은?
2011.12.30 13:08
function toggle_object(post_id){
var obj = xGetElementById(post_id);
if(!obj) return;
if(obj.style.display=="none"){
obj.style.display='block';
} else {
obj.style.display="none";
}
}
이게 제가쓰는 코드인데
링크에
<a href="#" onclick="toggle_object('test'); return false;"> <img src="./test.gif"> </a> 으로 쓰고 있는데
링크를 클릭하면
<img src="./test.gif"> 이 부분이 다른 이미지로 <img src="./test1.gif"> 바뀌게 할 수 있을까요?
아니면 CSS 로 처리하는 방법이 있을까요?
<a href="#" onclick="document.getElementById('test').src='클릭했을때 보여줄 이미지.jpg'; return false;"> <img src="./처음보여줄이미지.jpg" id="test" /> </a>
이건 그냥 간단히 한줄로 처리하는 것이고
만일 클릭때 마다 바뀌게 하려면
<script type="text/javascript">
var i = 0;
function toggle_object(post_id)
{
i = i + post_id;
var obj = document.getElementById('test');
if(!obj) return;
if(i%2!=0)
{
obj.src="클릭했을때 보여줄 이미지";
}
else
{
obj.src="처음보여줄이미지";
}
}
</script>
<a href="#" onclick="toggle_object(1); return false;"> <img src="처음보여줄이미지" id="test" /> </a>