728x90
반응형
[JavaScript] 9-1. 예제
(1) 이미지 띄우기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index12.html 파일 입니다.</h2>
<img src="images/image1.png" alt="">
<button onclick="toggleImage()">이미지토글</button>
<script>
function toggleImage(){
alert('11111');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex--container{
display: flex;
}
</style>
</head>
<body>
<h2>index12.html 파일 입니다.</h2>
<div class="flex--container">
<img src="images/image1.png" alt="">
<button onclick="toggleImage()" class="image">이미지토글</button>
</div>
<script>
let isImage1=true;
function toggleImage(){
const imgElement=document.getElementById("toggleImage");
if(isImage1){
imgElement.src="images/image2.png";
} else {
imgElement.src="images/image1.png";
}
isImage1=!isImage1;
}
function toggleImage2(){
let imageNode=document.getElementById("toggleImage");
if(imageNode.src.includes("image1.png")){
imageNode.src="images/image2.png";
} else {
imageNode.src="images/image1."
}
}
</script>
</body>
</html>728x90
반응형
'HTML,CSS, JS > JavaScript' 카테고리의 다른 글
| [JavaScript] 11. EventListener (0) | 2024.07.26 |
|---|---|
| [JavaScript] 10. 자바스크립트의 이벤트 처리 (0) | 2024.07.24 |
| [JavaScript] 9. DOM(Document Object Model) (0) | 2024.07.22 |
| [JavaScript] 8. 함수의 개념과 활용 (0) | 2024.07.19 |
| [JavaScript] 7. 배열의 개념과 사용 방법 (0) | 2024.07.19 |