<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사진변경 홈페이지</title>
<style>
body{
text-align: center;
}
h1{
border: 5px solid black;
margin: 30px auto;
height: 50px;
width: 12%;
}
ul>li{
list-style: none;
display: inline;
margin-right:20px;
}
ul{
list-style: none;
width: 50%;
margin: 10px auto;
}
div>img{
margin-top: 30px;
width: 50%;
height: 30%;
/* background-size: cover;
background-repeat: no-repeat; */
}
</style>
</head>
<body>
<h1>Travle</h1>
<ul>
<li><a id="home" class="link" onclick="clickCity(this)">Home</a></li>
<li><a id="Seoul" class="link" onclick="clickCity(this)">Seoul</a> </li>
<li><a id="Tokyo" class="link" onclick="clickCity(this)">Tokyo</a> </li>
<li><a id="Paris" class="link" onclick="clickCity(this)">Paris</a> </li>
</ul>
<div id="image">
</div>
<script>
function clickCity(e){
let city = e.id;
console.log(city);
let str=" ";
switch(city){
case 'home': str = `<img src="/image/냥비행기.jpg" alt="사진 없음">`; break;
case 'Seoul': str = `<img src="/image/서울.webp" alt="사진 없음">`; break;
case 'Tokyo': str = `<img src="/image/도쿄.webp" alt="사진 없음">`; break;
case 'Paris': str = `<img src="/image/파리.webp" alt="사진 없음">`; break;
}
document.getElementById('image').innerHTML = str;
}
</script>
</body>
</html>
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숙제</title>
<style>
body{
text-align: center;
}
h1{
border: 5px solid black;
width: 20%;
height: 50px;
margin: 30px auto;
}
ul{
list-style: none;
width: 30%;
margin: 10px auto;
}
li{
display: inline;
margin: 0px 10px;
}
img{
margin-top: 30px;
width: 50%;
}
a{
text-decoration: none;
}
a:hover{
cursor: pointer;
}
</style>
</head>
<body>
<h1>Travel</h1>
<ul>
<li><a id="home" class="links" onclick="clickCity(this);">Home</a></li>
<li><a id="seoul" class="links" onclick="clickCity(this);">Seoul</a></li>
<li><a id="tokyo" class="links" onclick="clickCity(this);">Tokyo</a></li>
<li><a id="paris" class="links " onclick="clickCity(this);">Paris</a></li>
</ul>
<img src="/image/home.jpg" alt="Home" id="cityImg">
<script>
const clickCity = (elem) => {
let idVal = elem.id;
let clsVal = elem.classList[0];
console.log(idVal);
console.log(clsVal);
document.getElementById('cityImg').src =
`/image/${idVal}.jpg`;
}
</script>
</body>
</html>
|
'JS > JS 수업분' 카테고리의 다른 글
| [JS] day13_async_promiseChain 데이터 가져오기 2 (0) | 2023.04.20 |
|---|---|
| [JS] day13_async_await 데이터 불러오기 (0) | 2023.04.20 |
| [JS] day12_parameter ( arguments, 옵셔널, ... ) (0) | 2023.04.19 |
| [JS] day12_calc 계산기 (0) | 2023.04.19 |
| [JS] day12_json (0) | 2023.04.19 |