basakest
diff --git a/‎gallery.html
+28 b/‎gallery.html
+28
diff --git a/‎images/bigben.jpg
25.6 KB b/‎images/bigben.jpg
25.6 KB
diff --git a/‎images/coffee.jpg
15.9 KB b/‎images/coffee.jpg
15.9 KB
diff --git a/‎images/fireworks.jpg
29.9 KB b/‎images/fireworks.jpg
29.9 KB
diff --git a/‎images/placeholder.gif
5.59 KB b/‎images/placeholder.gif
5.59 KB
diff --git a/‎images/rose.jpg
38.3 KB b/‎images/rose.jpg
38.3 KB
diff --git a/‎scripts/.DS_Store
6 KB b/‎scripts/.DS_Store
6 KB
diff --git a/‎scripts/showPic.js
+16 b/‎scripts/showPic.js
+16
diff --git a/‎styles/layout.css
+28 b/‎styles/layout.css
+28
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>Image Gallery</title>
+		<link rel="stylesheet" href="styles/layout.css" media="screen" />
+	</head>
+	<body>
+		<h1>Snapshots</h1>
+		<ul>
+			<li>
+				<a href="images/fireworks.jpg" title="A fireworks display" onclick = "showPic(this); return false;">Fireworks</a>
+			</li>
+			<li>
+				<a href="images/coffee.jpg" title="A cup of black coffee" onclick = "showPic(this); return false;">A cup of black coffee</a>
+			</li>
+			<li>
+				<a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a>
+			</li>
+			<li>
+				<a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a>
+			</li>
+		</ul>
+		<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
+		<p id="description">Choose an image.</p>
+		<script type="text/javascript" src="scripts/showPic.js"></script>
+	</body>
+</html>
@@ -0,0 +1,16 @@
+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;
+}
+
+function countBodyChildren(){
+	var body_element = document.getElementsByTagName("body")[0];
+	//alert(body_element.childNodes.length);
+	alert(body_element.nodeType);
+}
+
+//window.onload = countBodyChildren;
@@ -0,0 +1,28 @@
+body{
+	font-family: "helvetica", "Arial", serif;
+	color: #333;
+	background-color: #ccc;
+	margin: 1em 10%;
+}
+h1{
+	color:#333;
+	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;
+}