HTML,CSS, JS/JavaScript
[JavaScript] 9-1. 예제
Song hyun
2024. 7. 22. 11:09
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
반응형