✍
<script type="text/javascript">
function printImgAttr(){
// let targetImg = document.getElementById("img");
let targetImg = document.querySelector("#img");
// alert(targetImg);
alert("이미지 경로 : " + targetImg.getAttribute("src"));
}
function changeImage(imgElement){
// alert(imgElement);
// let smallImg = this.src;
document.querySelector("#img").setAttribute("src", imgElement.src);
}
</script>
</head>
<body>
<h1>test32.html</h1>
<div id="product_img">
<img src="../images/1.jpg" id="img" width="600" height="400" onclick="printImgAttr()">
</div>
<div id="product_img_small">
<img src="../images/1.jpg" width="200" height="150" onclick="changeImage(this)">
<img src="../images/2.jpg" width="200" height="150" onclick="changeImage(this)">
<img src="../images/3.jpg" width="200" height="150" onclick="changeImage(this)">
</div>
<input type="button" value="큰 그림 src 속성값 확인" onclick="printImgAttr()">
</body>
<body>
<h1>test33.html</h1>
<img src="../images/1.jpg" id="img" width="500" height="400">
<script type="text/javascript">
let img = document.querySelector("#img");
// img.onclick = function() { // 익명함수 자동완성
// img.src = "../images/2.jpg";
// };
img.onclick = changeImg;
function changeImg(){
img.src = "../images/2.jpg";
}
</script>
<hr>
<img src="../images/3.jpg" id="img" width="500" height="400">
<script type="text/javascript">
let img3 = document.querySelector("#img3");
img3.addEventListener("mouseover", changeImg2);
img3.addEventListener("mouseout", changeImg3);
function changeImg2(){
img3.src = "../images/1.jpg";
}
function changeImg3(){
img3.src = "../images/3.jpg";
}
</script>'개발 > Javascript' 카테고리의 다른 글
| [Javascript] 20230117 복습 필요 (0) | 2023.01.17 |
|---|---|
| [Javascript] 20230117 (0) | 2023.01.17 |
| [Javascript] innerText, innerHtml (0) | 2023.01.14 |
| [Javascript] location 객체 (0) | 2023.01.14 |
| [Javascript] history 객체 (0) | 2023.01.14 |
