자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해



프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해

2021.03.16
** 자바스크립트 이미지변경

하단 이미지1~이미지4 까지 클릭 하면 상위 이미지가 변경 되는 간단한 JS

실무에서는 아래 ex1)와 같이 img에 id값을 설정하여 제어 하는 것을 선호하지만 주어진 과제는 ex2)처럼 id img 태그 상위에 있다

ex1)

<div class='***' >
<img src="../../board_system_encounter/27/20110414050423us46.jpg" alt="" id="photo"/>
</div>


=======================================================================


ex2)

<div class='***' id="photo">
<img src="../../board_system_encounter/27/20110414050423us46.jpg" alt="" />
</div>



=======================================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION.CO.KR</title>

<style>
/*.banner_main { display:block; width:730px; }*/
</style>

<script language="javascript" type="text/javascript">
<!--
function img_chg(thphoto)
{

console.log(thphoto);

//var menu_val = thphoto.getAttribute('href');
//var galleryphoto = document.getElementById('photo');
//galleryphoto.setAttribute('src',source);

//document.getElementsByTagName("img").setAttribute("src","../../board_system_encounter/27/"+thphoto);

//document.getElementById("photo" ).innerHTML = "<img src='../../board_system_encounter/27/"+thphoto+"'>";
//document.getElementById("photo").setAttribute("src","../../board_system_encounter/27/"+thphoto);


document.getElementsByTagName('img')[0].setAttribute("src","../../board_system_encounter/27/"+thphoto);




}

/*
예제 이미지경로
http://www.relation.co.kr/images_board/board_system_encounter/27/20110414050423us46.jpg

http://www.relation.co.kr/images_board/board_system_encounter/27/20110414020447us01.jpg
http://www.relation.co.kr/images_board/board_system_encounter/27/20110414020427us03.jpg
http://www.relation.co.kr/images_board/board_system_encounter/27/20110414030438us08.jpg
http://www.relation.co.kr/images_board/board_system_encounter/27/20110414030456us15.jpg
*/
-->
</script>
</head>

<body>

<div class="wrap">
<div id="photo" >
<img src="../../board_system_encounter/27/20110414050423us46.jpg" alt="" />
</div>
<ul class="menu">
<li><a href="#" onclick="img_chg('20110414020447us01.jpg'); return false;">이미지1</a></li>
<li><a href="#" onclick="img_chg('20110414020427us03.jpg'); return false;">이미지2</a></li>
<li><a href="#" onclick="img_chg('20110414030438us08.jpg'); return false;">이미지3</a></li>
<li><a href="#" onclick="img_chg('20110414030456us15.jpg'); return false;">이미지4</a></li>
</ul>
</div>


</body>
</html>







<예제 실행결과>

http://relation.co.kr/images_board/board_system_publishing/243/demo1.html



이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 534
중요 [소스] 메뉴바 UI 소스1 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.04.02 4047
중요 [소스] jquery 달력 Datepicker  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.11.02 3197
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.02.10 73
중요 [소스] [소스] 메뉴바 UI 소스2 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2016.07.19 6361
중요 [기타] 구글맵 플랫폼  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.22 4901
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.18 5454
중요 [소스] 구글맵 좌표값 구하기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.08 3631
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 22171
중요 [소스] 제시어기능 자동완성 검색  이미지 파일이 첨부되어 있습니다. 꿘쓰 2011.05.18 2676
232 [소스] 슬라이드 배너 Swiper Slide 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.06 0
231 [소스] gnb 메뉴 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.02 0
230 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 534
229 [소스] Mouse Scroll Dwon 꿘쓰 2021.03.08 193
228 [기타] innerHTML 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.11.16 0
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 451
225 [소스] Window.scroll() 꿘쓰 2020.06.22 337
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 2
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.11.12 319
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 381
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 872
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 638
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 805
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 943
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 887
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 1358
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1