<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
문서 내의 이미지(img 태그)에 접근하는 방법
1. document.getElementById() 함수 또는 getElementByTag() 함수 사용
2. 이미지(img 태그)에 지정된 name 속성명으로 접근하는 방법
- document.name속성값.속성명 : 지정된 name 속성값에 해당하는 이미지의 속성에 접근
ex) document.img1.src : img1 이라는 name 속성값에 해당하는 이미지의 src 속성에 접근
3. 이미지 전체(복수개)를 배열 형태로 접근하는 방법
- document.images[인덱스].속성명 : 복수개 이미지 중 인덱스에 해당하는 이미지 속성 접근
ex) document.images[0].src : 첫번째 img 태그의 src 속성에 접근
*/
function func1() {
// "1.jpg" 이미지가 출력된 img 태그(name 속성값 img1)에 접근하여 파일명(src 속성값) 출력
// alert(document.img1.src);
// alert(document.images[0].src);
// 위의 두 코드는 동일한 대상에 접근
var imgInfo = "src : " + document.img1.src
+ "\nwidth : " + document.img1.width
+ "\nheight : " + document.img1.height
+ "\nborder : " + document.img1.border;
alert(imgInfo);
}
function func2() {
// "1.jpg" 이미지의 크기 및 이미지 파일을 변경
document.img1.width = "300";
document.img1.height = "300";
document.img1.border = "10";
document.img1.src = "2.jpg";
}
function changeImg(imgSrc) {
document.img3.src = imgSrc;
}
</script>
</head>
<body>
<h1>test14.html</h1>
<!--
img 태그 : 이미지 표시
- src="이미지경로" : 대상 이미지의 위치 및 파일명 지정
- width="" height="" : 대상 이미지 가로, 세로 크기
- border="" : 대상 이미지 테두리 굵기
- title="" : 대상이미지에 마우스 오버 시 표시할 툴팁 텍스트
- alt="" : 대상이미지 로딩 실패 시 표시할 대체 텍스트
-->
<img src="1.jpg" width="200" height="200" border="2" title="펭수" alt="펭수없음" name="img1"><br>
<input type="button" value="이미지속성정보출력" onclick="func1()">
<input type="button" value="이미지속성정보변경" onclick="func2()"><br>
<!-- 이미지에 마우스오버 시 4.jpg, 마우스아웃 시 5.jpg 로 변경 -->
<img src="3.jpg" width="200" height="200" name="img3"
onmouseover="changeImg('4.jpg')" onmouseout="changeImg('5.jpg')"><br>
</body>
</html>
