VScode/JavaScript
[JavaScript] Image
hvoon
2022. 9. 8. 17:54
getElementById
-자바스크립트에서 바디 안의 id 셀렉터 값을 지목하는 방법
-document.getElementById("아이디값")
onmouseover
-해당 태그에 마우스 포인터가 올라가면 일어나는 이벤트
onmouseout
-해당 태그에서 마우스 포인터가 밖으로 벗어나면 일어나는 이벤트
1. 마우스로 이미지 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image01.html</title>
<script type="text/javascript">
function changeImageg01(){
document.getElementById("img1").src="images/5.jpg";
} // 마우스를 올리면 변하는 이미지
function changeImage02(){
document.getElementById("img1").src="images/1.jpg";
} // 마우스가 이미지에서 벗어나면 나타나는 이미지
function changeImage03(){
document.getElementById("img1").src="images/3.jpg";
} // 마우스로 클릭하면 변하는 이미지
</script>
</head>
<body>
<img src="images/1.jpg" id="img1" onclick="changeImage03();"
onmouseover="changeImageg01();" onmouseout="changeImage02();"
/>
</body>
</html>
2. 이미지 이름 입력받아서 이미지 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image02.html</title>
<script type="text/javascript">
// 그림을 클릭하면 숫자하나를 입력 받아서
// "숫자.jpg" 파일로 그림을 바꾸는 코드를 완성
function change01(){
var number=prompt('number(1~10)','1');
var filename="images/"+number+".jpg";
document.getElementById("target").src=filename;
}
</script>
</head>
<body>
<img src="images/1.jpg" id="target" onclick="change01();" />
</body></html>3. 마우스 클릭으로 지정된 범위까지 이미지 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image03.html</title>
<script type="text/javascript">
// 클릭하면 이미지가 지정한 범위까지 순서대로 변함
var imgNum=1;
function changeImg(){
imgNum++;
if(imgNum>10) imgNum=1;
// 이미지 번호가 10 이후에는 1.jpg로 돌아감
document.getElementById("target").src="images/"+imgNum
+".jpg";
}
</script>
</head>
<body>
<img src="images/1.jpg" id="target" onclick="changeImg();"/>
</body>
</html>4. 지정된 범위까지 자동으로 이미지 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image04.html</title>
<script type="text/javascript">
// 1초에 한번씩 다음 이미지로 바뀌게 코딩. 그림은 1.jpg~10.jpg까지
var imgNum=1;
window.setInterval(function changeImg(){
imgNum++;
if(imgNum>10) imgNum=1;
document.getElementById("target").src="images/"+imgNum+".jpg";
},1000);
</script>
</head>
<body>
<img src="images/1.jpg" id="target">
</body>
</html>5. clearInterval()
-함수를 종료시키는 명령어
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image05.html</title>
<script type="text/javascript">
var imgNum=1;
var timer;
function start(){
// timer 변수로 멈출 명령을 정의함
timer=window.setInterval(function(){
imgNum++;
if(imgNum>10) imgNum=1;
document.getElementById("target").src="images/"+imgNum
+".jpg";
},1000);
}
function stop(){
window.clearInterval(timer)
}
</script>
</head>
<body onload="start();"> // 창을 실행시킬 때부터 start() 함수가 시작됨
<img src="images/1.jpg" id="target" onmouseover="stop();"
onmouseout="start();" >
// 이미지에 마우스를 올리면 변화하던 이미지가 멈춤
</body>
</html>6. 마우스로 함수 2개를 실행/정지 번갈아 시키기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image06.html</title>
<style type="text/css">
#a1{position:absolute; width:170px; height:255px;
border:2px solid black; top:100px;}
</style>
<script type="text/javascript">
// 한개의 타이머는 시계방향으로 0.5초마다 20도씩 회전하는 동작
// 또 한개의 타이머는 반시계방향으로 0.5초마다 20도씩 회전하는 동작
// onMouseOver와 onMouseOut 이벤트에 연결하여 코딩
var aa=0;
var timer1, timer2;
function clockwise(){
window.clearInterval(timer2);
timer1=window.setInterval(function(){
aa+=20;
document.getElementById("a1").style.webkitTransform=
'rotate('+aa+'deg)';},500);
}
function counterclockwise(){
window.clearInterval(timer1);
timer2=window.setInterval(function(){
aa-=20;
document.getElementById("a1").style.webkitTransform=
'rotate('+aa+'deg)';},500);
}
</script>
</head>
<body onload="clockwise();">
<div id="a1" onmouseout="clockwise();"
onMouseOver="counterclockwise();">
<img src="images/1.jpg" >
</div>
</body>
</html>css style을 이용한 이미지 슬라이드 제작하기
1. 마우스 클릭으로 다음 이미지 넘기기
-document.getElementById("").style.left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ImageControll01.html</title>
<style type="text/css">
#view{position:relative; width:170px; height:255px;
border:3px solid blue; left:100px; overflow:hidden;}
// view: 이미지가 나타날 id
// overflow: hidden으로 설정하여 #imgs가 지정된 범위를 제외하고 안 보임
#imgs{position:absolute; width:850px; height:255px;
border:1px dashed red; transition: 0.2s;}
// imgs: 이미지를 이어 붙인 id
</style>
<script type="text/javascript">
var imgNum=0;
// 이동 거리 계산 때문에 초기값은 1보단 0으로 하는게 좋음
function moveImg(){
imgNum++;
if(imgNum>4) imgNum=0;
var dist=imgNum*170*(-1);
// 왼쪽으로 이미지 크기(170px)만큼 이동함
document.getElementById("imgs").style.left=dist+"px";
}
</script>
</head>
<body>
<div id="view">
<div id="imgs" onclick="moveImg();">
<img src="images/1.jpg"><img src="images/2.jpg"><img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg">
// 이미지를 이어서 써야 float 명령으로 일렬로 출력됨
</div>
</div>
</body>
</html>2. 이미지 위에 마우스 올리면 정지, 마우스가 이미지에서 벗어나면 실행
-document.getElementById("").style.left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ImageControll02.html</title>
<style type="text/css">
#view{position:relative; width:170px; height:255px;
border:3px solid blue; left:100px; overflow:hidden;}
#imgs{position:absolute; width:850px; height:255px;
left:0; border:1px dashed red; transition: 0.2s;}
</style>
<script type="text/javascript">
// 타이머를 이용해서 시작부터 자동으로 움직이게 하되
// 마우스가 올라가면 멈추고 마우스가 빠져나가면 다시 움직임
var timer;
var imgNum=0;
// 이동 거리 계산 때문에 초기값은 1보단 0으로 하는게 좋음
function moveImg(){
timer=window.setInterval(function(){
imgNum++;
if(imgNum>4) imgNum=0;
var dist=imgNum*170*(-1);
document.getElementById("imgs").style.left=dist+"px";
},1000);
}
function stop(){
window.clearInterval(timer);
}
</script>
</head>
<body onLoad="moveImg();">
<div id="view" onmouseout="moveImg();" onmouseover="stop();">
<div id="imgs" >
<img src="images/1.jpg"><img src="images/2.jpg"><img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg">
</div>
</div>
</body>
</html>3. 투명도 이용해서 이미지 슬라이드 만들기
-document.getElementById('').style.opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ImageControll03.html</title>
<style type="text/css">
#view{position:relative; width:170px; height:255px;
border:1px solid blue; left:100px;}
.imgs{position:absolute; top:0; left:0; opacity:0;
transition:1s;}
.imgs:first-child{opacity:1;}
// 처음에 나타나는 이미지는 투명도 1로 하여 선명하게 나타나게 함
</style>
<script type="text/javascript">
var imgNum=1;
window.setInterval(function(){
// document.getElementById("imgs"+imgNum).style.opacity='0';
for(var i=1; i<=5; i++)
document.getElementById("imgs"+i).style.opacity='0';
// 현재 화면에 보여야할 이미지가 나오기 전에 모든 이미지 투명으로
imgNum++;
if(imgNum>5) imgNum=1;
document.getElementById("imgs"+imgNum).style.opacity='1';
},1000);
</script>
</head>
<body>
<div id="view">
<div class="imgs" id="imgs1"><img src="images/1.jpg"></div>
<div class="imgs" id="imgs2"><img src="images/2.jpg"></div>
<div class="imgs" id="imgs3"><img src="images/3.jpg"></div>
<div class="imgs" id="imgs4"><img src="images/4.jpg"></div>
<div class="imgs" id="imgs5"><img src="images/5.jpg"></div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ImageControll04.html</title>
<style type="text/css">
#view{position:relative; width:170px; height:255px;
border:1px solid blue; left:100px;}
.imgs{position:absolute; top:0; left:0; opacity:0;
transition:1s;}
.imgs:first-child{opacity:1;}
</style>
<script type="text/javascript">
// 순서대로 fadein 하되 마우스가 올라가면 멈춤, 나가면 다시 시작하게 코딩
var timer;
var imgNum=1;
function moveImg(){
timer=window.setInterval(function(){
document.getElementById("imgs"+imgNum).style.opacity='0';
imgNum++;
if(imgNum>5) imgNum=1;
document.getElementById("imgs"+imgNum).style.opacity='1';
},1000);
}
function stop(){
window.clearInterval(timer);
}
</script>
</head>
<body onload="moveImg">
<div id="view" onmouseout="moveImg();" onmouseover="stop();">
<div class="imgs" id="imgs1"><img src="images/1.jpg"></div>
<div class="imgs" id="imgs2"><img src="images/2.jpg"></div>
<div class="imgs" id="imgs3"><img src="images/3.jpg"></div>
<div class="imgs" id="imgs4"><img src="images/4.jpg"></div>
<div class="imgs" id="imgs5"><img src="images/5.jpg"></div>
</div>
</body>
</html>4. transform 이용하기
-document.getElementById("").style.webkitTransform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ImageControll05.html</title>
<style type="text/css">
ul{list-style:none; margin:0; padding:0;}
ul li{position:relative; float:left; padding:0;
margin:0px; overflow:hidden;}
.caption{position:absolute; width:300px; height:200px;
top:200px; background:black; opacity:0.7;
transition:0.5s;}
.caption h1, .caption p{color:white; text-align:center;}
</style>
<script type="text/javascript">
function caption_up(x){
document.getElementById("cap"+x).style.webkitTransform=
"translateY(-200px)";
} // 마우스를 이미지에 올리면 id cap이 올라옴
function caption_down(x){
document.getElementById("cap"+x).style.webkitTransform=
"translateY(+200px)";
} // 마우스가 이미지에서 벗어나면 id cap 내려감
</script>
</head>
<body>
<ul>
<li onmouseover="caption_up(1)" onmouseout="caption_down(1)">
<img src="images/prod1.jpg">
<div class="caption" id="cap1">
<h1>상품1</h1><p>상품1:설명텍스트</p><p>가격:12,234원</p>
</div>
</li>
<li onmouseover="caption_up(2)" onmouseout="caption_down(2)">
<img src="images/prod2.jpg">
<div class="caption" id="cap2">
<h1>상품2</h1><p>상품2:설명텍스트</p><p>가격:12,234원</p>
</div>
</li>
<li onmouseover="caption_up(3)" onmouseout="caption_down(3)">
<img src="images/prod3.jpg">
<div class="caption" id="cap3">
<h1>상품3</h1><p>상품3:설명텍스트</p><p>가격:12,234원</p>
</div>
</li>
</ul>
</body>
</html>5. 버튼 아이콘을 만들어 지정된 이미지로 이동하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ImageControll06.html</title>
<style type="text/css">
#view{position:relative; width:600px; height:400px;
margin:0 auto; border:1px dashed black; overflow:hidden;}
#imgs{position:absolute; width:4800px; height:400px;
left:0; top:0; border:1px dashed red; transition:0.3s;}
img{width:600px; height:400px;}
#remote{position:relative; width:200px; height:50px;
border:1px solid white; margin:0 auto; top:350px;
text-align: center;}
ul{list-style:none; padding:0; margin:0;
display:inline-block;}
ul li{float:left; width:14px; height:14px;
background:white; border-radius: 50%; margin:18px 4px;}
</style>
<script type="text/javascript">
// style의 left값을 이용해서 각 버튼에 맞는 이미지가 화면에
// 나타나도록 코딩
function move(x){
document.getElementById("imgs").style.left=(-1)*600*(x-1)+"px";
}
</script>
</head>
<body>
<div id="view">
<div id="imgs"><img src="images/Koala.jpg" id="img1"><img src="images/Chrysanthemum.jpg" id="img2"><img src="images/Desert.jpg" id="img3"><img src="images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="images/Tulips.jpg"></div>
<div id="remote">
<ul>
<li onclick="move(1)"></li>
<li onclick="move(2)"></li>
<li onclick="move(3)"></li>
<li onclick="move(4)"></li>
<li onclick="move(5)"></li>
<li onclick="move(6)"></li>
<li onclick="move(7)"></li>
<li onclick="move(8)"></li>
</ul>
</div>
</div>
</body>
</html>6. 좌우 버튼을 생성하여 이미지 넘기기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ImageControll07.html</title>
<style type="text/css">
#view{position:relative; width:600px; height:400px;
margin:0 auto; border:1px dashed black; overflow: hidden;}
#imgs{position:absolute; width:4800px; height:400px;
left:0; top:0; border:1px dashed red; transition:0.3s;}
img{width:600px; height:400px;}
#lbutton{position:absolute; left:0; bottom:0; width:50px;
height:50px; border-radius:50%; overflow:hidden;
background-image:url("images/ico_movie_171115.png");
background-position:-60px -460px;}
#rbutton{position:absolute; right:0; bottom:0; width:50px;
height:50px; border-radius:50%; overflow:hidden;
background-image:url("images/ico_movie_171115.png");
background-position:0px -460px;}
</style>
<script type="text/javascript">
var imgNum=0;
function moveleft(){
if(imgNum==0) return; // end function
imgNum--;
document.getElementById("imgs").style.left=imgNum*(-1)*600+"px";
}
function moveright(){
if(imgNum==7) return; // end function
imgNum++;
document.getElementById("imgs").style.left=imgNum*(-1)*600+"px";
}
function move(x){
if(x==-1&&imgNum==0)return;
else if(x==1&&imgNum==7) return;
else if(x==-1&&imgNum>0) imgNum--;
else if(x==1&&imgNum<7) imgNum++;
document.getElementById("imgs").style.left=imgNum*-600+"px";
}
</script>
</head>
<body>
<div id="view">
<div id="imgs"><img src="images/Koala.jpg" id="img1"><img src="images/Chrysanthemum.jpg" id="img2"><img src="images/Desert.jpg" id="img3"><img src="images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="images/Tulips.jpg"></div>
<div id="lbutton" onclick="move(-1);"></div>
<div id="rbutton" onclick="move(1);"></div>
</div>
</body>
</html>7. 시작/정지 버튼을 생성하여 이미지 넘기기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ImageControll08.html</title>
<style type="text/css">
#view{ position:relative; width:600px; height:400px;
margin:0 auto; border:1px dashed black; overflow: hidden;}
#imgs{ position:absolute; width:4800px; height:400px;
left:0px; top:0; border:1px dashed red; transition: 0.3s; }
img{ width:600px; height:400px; }
#remot{ position:relative; width:200px; height:50px;
border:1px solid white; margin:0 auto; top:350px;
text-align: center;}
#remot ul{ list-style:none; margin:0; padding:0;
display:inline-block;}
#remot ul li{ float:left; width:25px; height:25px;
background:white; border-radius: 50%;
margin:13px 10px; line-height:25px;
text-align:center; cursor: pointer;}
</style>
<script type="text/javascript">
// play : 이미지를 한장씩 1초 또는 2초마다 넘기며 보여줌
// 이미지의 끝(7번)에 다다르면 맨 처음 이미지로 이동.
// stop : 이미지 자동 rolling 을 멈춤.
// 이미지 롤링은 페이지 시작시 동작하면서 시작하게 작성
var imgNum=0;
var timer;
function play(){
timer = window.setInterval(function(){
imgNum++;
if(imgNum>7)imgNum=0;
var dist = -600*imgNum;
document.getElementById("imgs").style.left = dist + 'px';
}, 1500);
}
function stop(){
window.clearInterval(timer);
}
</script>
</head>
<body onload="play()">
<div id="view">
<div id="imgs"><img src="images/Koala.jpg"><img src="images/Chrysanthemum.jpg"><img src="images/Desert.jpg"><img src="images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="images/Tulips.jpg"></div>
<div id="remot">
<ul>
<li onClick="play()">▶</li>
<li onClick="stop()">■</li>
</ul>
</div>
</div>
</body>
</html>8. 시작/정지 버튼 번갈아가며 나타나게 함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ImageControll09.html</title>
<style type="text/css">
#view{position:relative; width:600px; height:400px;
margin:0 auto; border:1px dashed black; overflow:hidden;}
#imgs{position:absolute; width:4800px; height:400px;
left:0; top:0; border:1px dashed red; transition:0.3s;}
img{width:600px; height:400px;}
#remote{position:relative; width:200px; height:50px;
border:1px solid white; margin:0 auto; top:350px; }
#remote div{position:relative; width:25px; height:25px;
background:white; border-radius: 50%;
line-height:25px; text-align: center;
cursor:pointer; margin:13px auto;}
</style>
<script type="text/javascript">
var imgNum=0;
var timer;
var state=false;
// 현재 플레이 상태인지, 멈춤상태인지 저장할 변수
// document.getElementById("btn").innerHTML='■';
// document.getElementById("btn").innerHTML='▶';
function play_stop(){
if(state==true){
// 현재 플레이중(버튼에 '■'가 표시되어 있는 중 버튼 클릭)
// -> 동작은 멈추고 버튼 표시는 '▶'로 전환
state=false;
window.clearInterval(timer);
document.getElementById("btn").innerHTML='▶';
} else{
// 현재 멈춰있는 중(버튼에 '▶'가 표시되어 있는 중 버튼 클릭)
// -> 동작은 멈추고 버튼 표시는 '■'로 전환
state=true;
document.getElementById("btn").innerHTML='■';
timer=window.setInterval(function(){
imgNum++;
if(imgNum>7) imgNum=0;
document.getElementById("imgs").style.left=imgNum*-600+"px";
},1000);
}
}
</script>
</head>
<body onload="play_stop()">
<div id="view">
<div id="imgs"><img src="images/Koala.jpg" id="img1"><img src="images/Chrysanthemum.jpg" id="img2"><img src="images/Desert.jpg" id="img3"><img src="images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="images/Tulips.jpg"></div>
<div id="remote">
<div id="btn" onclick="play_stop()">■</div>
</div>
</div>
</body>
</html>