This time, an example where clicking a list item changes the image in the box below... ㅜㅜ
Absolutely dog-tired... ㅜㅜ That's it for today...
|
This time, external link "4event_갤러리3.js" function img_change(h){ // make the selected link's item image appear inside the tag's image document.getElementById("holder").src=h; } function holder_load(){ // set the tag's style 's display value to block document.getElementById("p_view").style.display="block"; }
window.onload=start; //onload = after the document is fully loaded, run the start function.
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_gallery 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>Photo Album</h1> |
|
|
<ul> |
|
|
<li><a href="../images/image1.jpg">Item 1</a></li> |
|
|
<li><a href="../images/image2.jpg">Item 2</a></li> |
|
|
<li><a href="../images/image3.jpg">Item 3</a></li> |
|
|
<li><a href="../images/image4.jpg">Item 4</a></li> |
|
|
<li><a href="../images/image5.jpg">Item 5</a></li> |
|
|
<li><a href="../images/image6.jpg">Item 6</a></li> |
|
|
</ul> |
|
|
<p id="p_view"> <img src="../images/placeholder.gif" alt="View image" id="holder" /> </p> |
|
|
</body> |
|
|
|
|
|
</html> |
