이번엔 목록을 클릭하면 아래 박스에 이미지가 바뀌는,,,예제 ㅜㅜ
완전 멍멍이 피곤... ㅜㅜ 오늘은 여기까지...
|
이번엔 외부링크 "4event_갤러리3.js" function img_change(h){ // 선택된링크의물품이미지가 p태그안의이미지에보이게하기 document.getElementById("holder").src=h; } function holder_load(){ // p태그의 style의 display의값을 block으로지정 document.getElementById("p_view").style.display="block"; }
window.onload=start; //onload =문서를전부읽고나서 start함수를실행하라.
function start(){ holder_load();
var as=document.getElementsByTagName("a");
for(var i=0; i<6 ; i++){ as[i].onclick=function(){ img_change(this.href); returnfalse; } } }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> |
|
|
|
|
|
<head> |
|
|
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> |
|
|
<title>event_갤러리 3 </title> |
|
|
|
|
|
<meta name="Keywords" content="" /> |
|
|
<meta name="Description" content="" /> |
|
|
|
|
|
<style type="text/css"> |
|
|
p {display:none;} |
|
|
</style> |
|
|
<script type="text/javascript" src="4event_갤러리3.js" charset="utf-8"></script> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<h1>사진첩</h1> |
|
|
<ul> |
|
|
<li><a href="../images/image1.jpg">물품1</a></li> |
|
|
<li><a href="../images/image2.jpg">물품2</a></li> |
|
|
<li><a href="../images/image3.jpg">물품3</a></li> |
|
|
<li><a href="../images/image4.jpg">물품4</a></li> |
|
|
<li><a href="../images/image5.jpg">물품5</a></li> |
|
|
<li><a href="../images/image6.jpg">물품6</a></li> |
|
|
</ul> |
|
|
<p id="p_view"> <img src="../images/placeholder.gif" alt="이미지보기" id="holder" /> </p> |
|
|
</body> |
|
|
|
|
|
</html> |
'새로워지기 > 서른의 생활코딩' 카테고리의 다른 글
| 샘플소스5) javascript 기본 문서구조 : cookie (2) (0) | 2011.04.23 |
|---|---|
| 샘플소스5) javascript 기본 문서구조 : cookie (1) (0) | 2011.04.23 |
| 샘플소스4) javascript 기본 문서구조 : window객체 3)이벤트.이벤트핸들러 4. (0) | 2011.04.22 |
| 샘플소스4) javascript 기본 문서구조 : window객체 3)이벤트.이벤트핸들러 3. (0) | 2011.04.22 |
| 샘플소스4) javascript 기본 문서구조 : window객체 3)이벤트.이벤트핸들러 2. (0) | 2011.04.22 |
댓글