<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.test{
width: 100px;
}
.result{
width: 500px;
height: 300px;
}
#img_div{
position: absolute;
left: 500px;
top: 100px;
cursor: pointer; /* 커서포인터 : 링크기능있는 걸 알수있도록 커서모양 바꿔줌 */
}
#result_div>img {
position: absolute;
left: 350px;
top: 300px;
width: 600px;
height: 350px;
}
</style>
<script type="text/javascript">
/* (방법1)
window.onload=function(){
//1.id로 객체 읽어오기..개수가 많을 때는 배열처리
img1=document.getElementById("img1");
img2=document.getElementById("img2");
img3=document.getElementById("img3");
img4=document.getElementById("img4");
//2.이미지 각 개체마다 온클릭 기능 부여
img1.onclick=function(){
//img5객체에 src속성값을 각각의 객체 src를 읽어와서 변경
//setAttribute는 선택한 요소 element의 속성값을 정한다
img5.setAttribute("src",img1.getAttribute("src"));
}
img2.onclick=function(){
img5.setAttribute("src", img2.getAttribute("scr"));
}
img3.onclick=function(){
img5.setAttribute("src", img3.getAttribute("src"));
}
img4.onclick=function(){
img5.setAttribute("src", img4.getAttribute("src"));
}
} */
//방법(2)
//배열로 해보기
window.onload=function(){
var img=[document.getElementById("img1"),
document.getElementById("img2"),
document.getElementById("img3"),
document.getElementById("img4")]
for(i=0;i<img.length;i++)
{
img[i].onclick=function(){
img5.setAttribute("src", this.getAttribute("src"));
}
}
}
</script>
</head>
<body>
<!-- 미리보는 작은 이미지 -->
<div id="img_div">
<img alt="" src="../image/a01.png" class="test" id="img1">
<img alt="" src="../image/a02.png" class="test" id="img2">
<img alt="" src="../image/a03.png" class="test" id="img3">
<img alt="" src="../image/a04.png" class="test" id="img4">
</div>
<!-- 선택된 큰 이미지 -->
<div id="result_div">
<img alt="" src="../image/a01.png" class="result" id="img5">
</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 210927_button,image(절대주소,상대주소) (0) | 2021.09.27 |
|---|---|
| 210927_button,location.href (0) | 2021.09.27 |
| 210924_window.open/close,버튼,opener (0) | 2021.09.24 |
| 210924_(랜덤숫자맞추기)innerHTML,이미지 (0) | 2021.09.24 |
| 210924_setTimeout,setInterval,버튼,이미지 (0) | 2021.09.24 |