자바스크립트 질문드립니다.
본문
예를 들어 id='dot1' 아리는 이미지를 클릭하면 dot1이미지가 나타나고 id='dot2' 이라는 이미지를 클릭하면 dot1 이미지는 사라지고 dot2이미지가 나타나겠끔 할려구합니다.
이 dot이라는 이미지 갯수가 정해지지는 않았습니다 10개가될수있고 20개가될수있습니다
자바스크립트로 어떻게 구현해야할까요ㅠ 답변좀 부탁드립니다.
답변 3
질문을 좀더 상세히 해주시면 좋겠네요
이미지를 클릭하면 이미지가 나타난다는게 좀 모호하네요
대략 캡춰나 그림이라도 있어야 답을 드리던가 하겠는데요
이미지를 클릭시 <div><img id="imageBox" src=""></div>에 뜨는 것으로 예제를 만들어 봤습니다.
참조만 하세요. 테스트해 보지 못해 작동여부는 모르겠습니다.
<div><img id="imageBox" src="img1.gif"></div>
<img id="dot1" src="img1.gif" class="dot" /><img id="dot2" src="img2.gif" class="dot" /><img id="dot3" src="img3.gif" class="dot" />
<script>
$(function(){
$(".dot").click(function(){
var src = $(this).attr("src");
$("#imageBox").attr("src", src);
});
});
</script>
아래 소스를 활용하시면
원하는 답이 될듯합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>토글이미지</title>
</head>
<body>
<style type='text/css'>
.common{display:none;}
</style>
<div class="container text-center">
<a href="#dot1" class="btn-toggle">dot1</a>
<a href="#dot2" class="btn-toggle">dot2</a>
</div>
<div id="dot1" class='common'>
dot1
</div>
<div id="dot2" class='common'>
dot2
</div>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
