728x90
images앞에 ./가 생략
<body>
<img src="images/boo.jpg" width=200 height="100"><br>
<input type="button" value="다음" onclick="f_next()">
</body>
이미지태그에 접근하기
<body>
<img src="./images/boo.jpg" width=200 height="100"><br>
<input type="button" value="다음" onclick="f_next()">
<script>
function f_next(){
}
</script>
</body>
1) 아이디주기
<body>
<img id="id_img" src="./images/boo.jpg" width=200 height="100"><br>
<input type="button" value="다음" onclick="f_next()">>
<script>
function f_next(){
}
</script>
</body>
2) 아이디 가져오기
<body>
<img id="id_img" src="./images/boo.jpg" width=200 height="100"><br>
<input type="button" value="다음" onclick="f_next()">
<script>
var v_img = document.getElementById("id_img");
function f_next(){
}
</script>
</body>
3) 이미지 소스 바꾸기
<body>
<img id="id_img" src="./images/boo.jpg" width=200 height="100"><br>
<input type="button" value="다음" onclick="f_next()">
<script>
var v_img = document.getElementById("id_img");
function f_next(){
v_img.src = "images/all.jpg";
}
</script>
</body>
4) 이미지 변경하며 크기도 변경
버튼 누르면 점점 이미지가 커졍
<body>
<img id="id_img" src="./images/boo.jpg" width=200 height="100"><br>
<input type="button" value="다음" onclick="f_next()">
<script>
var v_img = document.getElementById("id_img");
function f_next() {
v_img.src = "images/all.jpg";
v_img.width = v_img.width * 2;
v_img.height = v_img.height * 2;
}
</script>
</body>
5) 다음 버튼 클릭 시 다른 이미지로 변경
더보기
>> 사진목록
>> 배열요소 확인
<body>
<img id="id_img" src="./images/boo.jpg" width=200 height="100"><br>
<input type="button" value="다음" onclick="f_next()">
<script>
var v_img = document.getElementById("id_img");
var v_imgs=[];
for(var i=0;i<7;i++){
v_imgs[v_imgs.length] = "images/all"+i+".jpg";
}
alert(v_img);
function f_next() {
v_img.src = "images/all.jpg";
v_img.width = v_img.width * 2;
v_img.height = v_img.height * 2;
}
</script>
</body><body>
<img id="id_img" src="./images/boo.jpg" width=200 height="100"><br>
<input type="button" value="다음" onclick="f_next()">
<script>
var v_img = document.getElementById("id_img");
var v_imgs = [];
for (var i = 0; i < 7; i++) {
v_imgs[v_imgs.length] = "images/all" + i + ".jpg";
}
// alert(v_img);
var v_startIndex = 1;
function f_next() {
var v_index = v_startIndex++;
v_img.src = "images/all" + v_index + ".jpg";
v_img.width = v_img.width;
v_img.height = v_img.height;
}
</script>
</body>
6) 마지막 사진 나오면 다시 처음 사진이 보이게끔
<body>
<img id="id_img" src="./images/boo.jpg" width=200 height="100"><br>
<input type="button" value="다음" onclick="f_next()">
<script>
var v_img = document.getElementById("id_img");
var v_imgs = [];
for (var i = 0; i < 7; i++) {
v_imgs[v_imgs.length] = "images/all" + i + ".jpg";
}
var v_startIndex = 1;
function f_next() {
var v_index = v_startIndex++;
if (v_startIndex == 7) {
v_startIndex = 0;
}
v_img.src = "images/all" + v_index + ".jpg";
v_img.width = v_img.width;
v_img.height = v_img.height;
}
</script>
</body>더보기
v_startIndex로 비교하려면 v_imgs.length으로
var v_index = v_startIndex++;
if (v_startIndex == v_imgs.length) {
v_startIndex = 0;
}v_index로 비교하려면 v_imgs.length으로
function f_next() {
var v_index = v_startIndex++;
if (v_index == v_imgs.length-1) {
v_startIndex = 0;
}
'화면구현 > HTML' 카테고리의 다른 글
| 타이머 (0) | 2020.06.22 |
|---|---|
| Text Area (0) | 2020.06.22 |
| 콤보박스 (0) | 2020.06.22 |
| HTML 테이블로 구구단 출력 (0) | 2020.06.19 |
| HTML 라디오버튼과 체크박스 (0) | 2020.06.19 |