답변 3개
7년 전
아래 소스를 활용하시면
원하는 답이 될듯합니다.
</p>
<p><!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></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
7년 전
이미지를 클릭시 <div><img id="imageBox" src=""></div>에 뜨는 것으로 예제를 만들어 봤습니다.
참조만 하세요. 테스트해 보지 못해 작동여부는 모르겠습니다.
</p>
<p><div><img id="imageBox" src="img1.gif"></div></p>
<p><img id="dot1" src="img1.gif" class="dot" /><img id="dot2" src="img2.gif" class="dot" /><img id="dot3" src="img3.gif" class="dot" /></p>
<p><script>
$(function(){
$(".dot").click(function(){
var src = $(this).attr("src");
$("#imageBox").attr("src", src);
});
});
</script></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인