프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

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

2021.03.16
북마크 작성자 정보
자바스크립트 이미지변경
하단 이미지1~이미지4를 클릭 하면 상위 이미지가 변경 되는 간단한 Javascript 실무에서는 아래 ex1)와 같이 img에 id값을 설정하여 작업하지만 주어진 과제는 ex2)처럼 id img 태그 상위에 있다

 
<script>
			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>

<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>

이 포스트 공유하기

전체목록