<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img {
width: 100px;
border: 2px groove pink;
}
.mybtn{
width: 120px;
height: 30px;
font-size: 12pt;
background: green;
color: white;
border-radius: 30px; /* 100px은 원 */
}
</style>
<script type="text/javascript">
/* 헤드태그에서 스트립트 사용시 window.onloade 사용 */
window.onload=function(){
/* id로 해당 요소값 읽어오기 */
btn1=document.getElementById("btn1");
btn2=document.getElementById("btn2");
btn3=document.getElementById("btn3");
myimg1=document.getElementById("myimg1");
myimg2=document.getElementById("myimg2");
//변경1 버튼
/* 읽어온 객체에 이벤트 부여하기 */
btn1.onclick=function(){
/* getattribute:속성값 읽어오는 거, setattribute:속성값 변경 */
console.log("1번 버튼 클릭")
myimg1.setAttribute("src", "/JavaScript/cat/IMG_5507.JPG"); //절대주소
myimg2.setAttribute("src", "../cat/IMG_8014.jpg"); //상대주소
myimg1.style.width="150px"; //이미지 너비 변경..스타일시트로 너비 주었을 경우 변경도 스타일시트로
}
//변경2 버튼
btn2.onclick=function(){
console.log("2번 버튼 클릭")
myimg1.setAttribute("src", "/JavaScript/cat/IMG_5188.JPG"); //절대주소
myimg2.setAttribute("src", "../cat/IMG_5126.JPG"); //상대주소
myimg1.style.width="150px";
}
//원래대로 버튼
btn3.onclick=function(){
console.log("2번 버튼 클릭")
myimg1.setAttribute("src", "/JavaScript/star/star1.jpg"); //절대주소
myimg2.setAttribute("src", "../star/star2.jpg"); //상대주소
myimg1.style.width="150px";
}
}
</script>
</head>
<body>
<h3>절대주소를 이용한 이미지</h3>
<img alt="" src="/JavaScript/star/star1.jpg" id="myimg1">
<h3>상대주소를 이용한 이미지</h3>
<img alt="" src="../star/star2.jpg" id="myimg2">
<hr>
<input type="button" value="변경1" id="btn1" class="mybtn">
<input type="button" value="변경2" id="btn2" class="mybtn">
<input type="button" value="원래대로" id="btn3" class="mybtn">
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 210927_array,button,image,push,innerHTML (0) | 2021.09.27 |
|---|---|
| 210927_image,innerHTML,confirm,button (0) | 2021.09.27 |
| 210927_button,location.href (0) | 2021.09.27 |
| 210927_image,setAttribute(array) (0) | 2021.09.27 |
| 210924_window.open/close,버튼,opener (0) | 2021.09.24 |