Designer · Publisher
[제이쿼리] 클릭하면 이미지 변경 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event</title>
<style>
*{margin: 0; padding: 0;}
ul,ol,li{list-style: none}
a{ display: block; text-decoration: none; font-size: 12px; width: 80px; height: 19px; text-align: center; color: #333;}
a:hover{
color: #ff1499;
}
.list {
overflow: hidden;
width: 400px;
margin: 0 auto;
padding: 15px 0;
}
.list li{
float: left;
}
p{
width: 400px;
margin: 0 auto;
display: block;
text-align: center;
}
</style>
</head>
<body>
<ul class="list">
<li><a href="img/mov1.jpg" title="조이" data-n="01">01</a></li>
<li><a href="img/mov2.jpg" title="널기다리며" data-n="02">02</a></li>
<li><a href="img/mov3.jpg" title="귀향" data-n="03">03</a></li>
<li><a href="img/mov4.jpg" title="주토피아" data-n="04">04</a></li>
<li><a href="img/mov5.jpg" title="갓오브이집트" data-n="05">05</a></li>
</ul>
<p><img src="img/mov1.jpg" alt="영화01" /></p>
</body>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
방법01. 영화2를 클릭하면 아래 p의 이미지가 mov2로 변경
$(function(){
$('.list li a').click(function(){
$('p img').attr('src','img/mov2.jpg')
})
})
방법02. a를 클릭했을 때, 내가 누른 a태그의 href를 가지고 와서 img의 경로를 변경
$(function(){
$('.list li a').click(function(){
$('p img').attr('src',$(this).attr('href'))
return false;
})
})
방법03. a를 클릭했을 때, 내가 누른 a태그의 href를 가지고 와서 img의 경로를 변경
$(function(){
$('.list li a').click(function(){
var img_src = $(this).attr('href')
$('p img').attr('src',img_src)
return false;
})
})
방법03-1. a를 클릭했을 때, art 텍스트 변경
$(function(){
$('.list li a').click(function(){
var img_src = $(this).attr('href')
var art_txt = $(this).text()
$('p img').attr('src',img_src)
$('p img').attr('alt',art_txt)
return false;
})
})
방법03-2. a에 마우스를 올렸을 때 영화제목 변경
$(function(){
$('.list li a').mouseover(function(){
var textTit = $(this).attr('title')
$(this).text(textTit)
return false;
})
})
방법03-3. a에 마우스를 벗어났을 때
$(function(){
$('.list li a').mouseover(function(){
var textTit = $(this).attr('title')
$(this).text(textTit)
return false;
}).mouseout(function(){
//data- : 사용해서 선언
var textDataN = $(this).attr('data-n')
$(this).text(textDataN)
return false;
})
})
</script>
</html>
[ex01]
다음 버튼 클릭 시 이미지 변경
[ex02]
다음 버튼 클릭 시 이미지 변경(appendTo, insertAfter 사용)
[ex03]
다음 버튼 클릭 시 이미지 변경(if 사용)
'M' 카테고리의 다른 글
| [제이쿼리] for반복문(for(){}, new Array('')) (0) | 2017.07.09 |
|---|---|
| [제이쿼리] slider carousel (0) | 2017.07.01 |
| [제이쿼리] 부등호연산자, if조건문 (0) | 2017.06.24 |
| [자바스크립트&제이쿼리] 매개변수_body좌표값 추출, TOOLTIP (0) | 2017.06.10 |
| [HTML] form 구성 방법 (0) | 2017.06.05 |