๐ป๋ง์ฐ์ค ํด๋ฆญํ์ฌ ์ด๋ฏธ์ง ์์ฑํ๊ธฐ๐ป
๊ธฐ๋ณธ ๋ผ๋
<!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>
#tbl1 {
border: 1px solid gray;
border-collapse: collapse;
}
#tbl1 td {
border: 1px solid gray;
width: 126px;
height: 126px;
}
#tbl1 td img {
display: block;
}
</style>
</head>
<body oncontextmenu="return false;">
<table id="tbl1">
<!-- tr*5>td*5 -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
ํ ์ด๋ธ์ ์ด๋ฒคํธ ์ถ๊ฐ
<script>
// <td> 25๊ฐ์ ์ด๋ฒคํธ ์ถ๊ฐ
var list = document.getElementsByTagName('td');
for (var i=0; i<list.length; i++) {
list[i].onmousedown = m2;
}
function m2() {
var n=0;
if (event.buttons ==1) {
n=1;
} else if(event.buttons ==2) {
n=2;
} else if(event.buttons ==4) {
n=3;
}
event.target.innerHTML = '<img src="../asset/images/rect_icon0'+ n +'.png">'
}
</script>
๋ง์ฐ์ค ์ข ํด๋ฆญ, ์ฐ ํด๋ฆญ, ํ ํด๋ฆญ ๋ง๋ค ๋ค๋ฅธ ์ด๋ฏธ์ง๊ฐ ์์ฑ๋๋ค.
๐ปํด๋ฆญํ ์ธ๋ค์ผ์ ํ๋จ์ ์ถ๋ ฅํ๊ธฐ & ํ๋ฒ์ ์ญ์ ํ๊ธฐ๐ป
๊ธฐ๋ณธ ๋ผ๋
<!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>
#sample {
border: 1px solid black;
background-color: #eee;
padding: 20px;
width: 800px;
text-align: center;
}
#sample .pic {
width: 150px;
border-radius: 10px;
opacity: .3;
cursor: pointer;
}
#sample .pic:hover {
opacity: 1;
}
</style>
</head>
<body>
<div id="sample">
<img src="../asset/images/cat01.jpg" class="pic">
<img src="../asset/images/cat02.jpg" class="pic">
<img src="../asset/images/cat03.jpg" class="pic">
<img src="../asset/images/cat04.jpg" class="pic">
<img src="../asset/images/cat05.jpg" class="pic">
<img src="../asset/images/dog01.jpg" class="pic">
<img src="../asset/images/dog02.jpg" class="pic">
<img src="../asset/images/dog03.jpg" class="pic">
<img src="../asset/images/dog04.jpg" class="pic">
<img src="../asset/images/dog05.jpg" class="pic">
</div>
<hr>
<input type="button" value="์ญ์ ํ๊ธฐ" id="btn1">
<hr>
<div id="output"></div>
</body>
</html>
ํ๋จ์ ์ถ๋ ฅํ๊ธฐ
<script>
var pic = document.getElementsByClassName('pic');
//์ฌ์ง๋ง๋ค onclick ์ด๋ฒคํธ ๋ฑ๋กํ๊ธฐ
for (var i=0; i<pic.length; i++) {
pic[i].onclick = m1;
}
function m1() {
//ํด๋ฆญํ <img>ํ์ธ
//alert(event.target.src);
var url = event.target.src;
var filename = url.substring(url.lastIndexOf('/')+1);
//alert(filename);
document.getElementById('output').innerHTML += '<img src="../asset/images/'+ filename + '">';
}
</script>
ํ๋ฒ์ ์ญ์ ํ๊ธฐ
<script>
document.getElementById('btn1').onclick = m2;
function m2() {
if (document.getElementById('output').innerHTML != ''){
if (confirm('์ ๋ง ์ญ์ ํ์๊ฒ ์ต๋๊น?')){
document.getElementById('output').innerHTML='';
}
}
}
</script>
์ฌ์ฉ์์๊ฒ ๊ฐ์ ์ ๋ ฅ๋ฐ์ ํ์ธ์ ๋ฐ์ผ๋ฉด ์ญ์ ํ๋ค.
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] DOM - ํ๊ทธ ๊ฒ์ ๋๊ตฌ(1) : ์๋ณ์ ๊ฒ์ (0) | 2023.10.10 |
|---|---|
| [JavaScript] ์ฐํด๋ฆญ, ๋๋ธ ํด๋ฆญ ๊ธ์ง (0) | 2023.10.10 |
| [JavaScript] Content ์กฐ์(1) : innerText, innerHTML, textContent (0) | 2023.10.10 |
| [JavaScript] DOM์ ๊ธฐ์ด (0) | 2023.10.10 |
| [JavaScript] ์ผ์ ์๊ฐ ํ ํจ์ ์คํ : ํ์ด๋จธ(โ ) (0) | 2023.10.10 |
