홈페이지 소스

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

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


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

ex2) img 상위 태그에 id
<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/index.html
 

이 포스트 공유하기

글수정  글삭제 전체목록