bnnd/PPoegg.markdown

## index.html
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Image Gallery</title>
</head>

<body>
  <h1>Snapshots</h1>
  <ul>
    <li>
      <a href="http://ww3.sinaimg.cn/large/6e557adagw1esx2ow6fuoj20zk0m8jwo.jpg" onclick="showPic(this);return false;" title="A fireworks display">Fireworks</a>
    </li>
    <li>
      <a href="http://i7.qhimg.com/t01d3287ea2ec4711ec.jpg" onclick="showPic(this);return false;" title="A cup of black coffee">Coffee</a>
    </li>
    <li>
      <a href="http://pic24.nipic.com/20121025/10375967_210759890000_2.jpg" onclick="showPic(this);return false;" title="A red,red rose">Rose</a>
    </li>
    <li>
      <a href="http://images.china.cn/attachement/jpg/site1007/20120210/00114320ca55109ec90c1f.jpg" onclick="showPic(this);return false;" title="The fmaous clock">Big Ben</a>
    </li>
  </ul>
  <img id="placeholder" src="https://c1.staticflickr.com/5/4028/4212770969_097435de77_m.jpg" alt="my image gallery" />
  <p id="description">Choose an image.</p>
</body>
</html>

## PPoegg.markdown

      
    Raw
  

              PPoegg.markdown
            
          
    PPoegg

A Pen by JingsLunt on CodePen.
License.

  
## script.js
function  showPic(whichpic){
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  var text = whichpic.getAttribute("title");
  var description = document.getElementById("description");
  description.firstChild.nodeValue= text;
}

## style.css
body {
  font-family: "Helvetica","Arial",serif;
  color: #333;
  background-color: #ccc;
  margin: 1em 10%;
}
h1 {
  color:#933;
  background-color: transparent;
}
a {
  color: #c60;
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
}
ul {
  padding: 0;
}
li {
  float: left;
  padding: 1em;
  list-style: none;
}
img {
  display:block;
  clear: both;
}
	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<title>Image Gallery</title>
	</head>

	<body>
	<h1>Snapshots</h1>
	<ul>
	<li>
	<a href="http://ww3.sinaimg.cn/large/6e557adagw1esx2ow6fuoj20zk0m8jwo.jpg" onclick="showPic(this);return false;" title="A fireworks display">Fireworks</a>
	</li>
	<li>
	<a href="http://i7.qhimg.com/t01d3287ea2ec4711ec.jpg" onclick="showPic(this);return false;" title="A cup of black coffee">Coffee</a>
	</li>
	<li>
	<a href="http://pic24.nipic.com/20121025/10375967_210759890000_2.jpg" onclick="showPic(this);return false;" title="A red,red rose">Rose</a>
	</li>
	<li>
	<a href="http://images.china.cn/attachement/jpg/site1007/20120210/00114320ca55109ec90c1f.jpg" onclick="showPic(this);return false;" title="The fmaous clock">Big Ben</a>
	</li>
	</ul>
	<img id="placeholder" src="https://c1.staticflickr.com/5/4028/4212770969_097435de77_m.jpg" alt="my image gallery" />
	<p id="description">Choose an image.</p>
	</body>
	</html>
	function showPic(whichpic){
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("src",source);
	var text = whichpic.getAttribute("title");
	var description = document.getElementById("description");
	description.firstChild.nodeValue= text;
	}
	body {
	font-family: "Helvetica","Arial",serif;
	color: #333;
	background-color: #ccc;
	margin: 1em 10%;
	}
	h1 {
	color:#933;
	background-color: transparent;
	}
	a {
	color: #c60;
	background-color: transparent;
	font-weight: bold;
	text-decoration: none;
	}
	ul {
	padding: 0;
	}
	li {
	float: left;
	padding: 1em;
	list-style: none;
	}
	img {
	display:block;
	clear: both;
	}