Menu with preloaded content

Simple horizontal menu using psuedo-class hover and block float left and pre-loaded but hidden content.

by Justin Harker

HTML

<!-- Simple Menu with Pre-Loaded Content -->
<!-- Curtin Univeristy                   -->
<!-- School of Information Systems       -->
<!-- Businsess Web Technologies ISYS3004 -->

<header>
  <h1>Welcome to the BWT Pet Store</h1>
</header>

<div id="menu">
  <div onclick="loadContent('fish')"> Fish </div>
  <div onclick="loadContent('dog')"> Dog </div>
  <div onclick="loadContent('cat')"> Cat </div>
</div>

<div id="content">

  <div id="fish">
    <h2> Goldfish </h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Goldfish3.jpg/560px-Goldfish3.jpg" , alt="picture of a goldfish" />
    <a href="https://commons.wikimedia.org/wiki/File:Goldfish3.jpg">Image License</a>
    <p> You will find information about goldfish on this page.</p>
  </div>

  <div id="dog">
    <h2> Dog </h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Poligraf_Poligrafovich.JPG/483px-Poligraf_Poligrafovich.JPG" />
    <a href="https://commons.wikimedia.org/wiki/File:Poligraf_Poligrafovich.JPG"> Image License</a>
    <p> Dogs are on this page.</p>
  </div>

  <div id="cat">
    <h2> Cat </h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/320px-Kittyply_edit1.jpg">
    <a href="https://commons.wikimedia.org/wiki/File:Kittyply_edit1.jpg"> Image License</a>
    <p> This is all about cats.
    </p>
  </div>
</div>

CSS

#fish {
  display: block;
}

#dog {
  display: none;
}

#cat {
  display: none;
}

#content img {
  width: 256px;
  display: block;
}

body {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

header {
  width: 100%;
}

#menu {
  background-color: lightgray;
  margin: auto;
  padding: 0px;
  width: 1024px;
  height: 40px;
}

#menu div {
  float: left;
  /* float left makes an implicit display:block;  */
  text-decoration: none;
  background-color: green;
  color: yellow;
  width: 100px;
  /* all items have a constant width          */
  height: 16px;
  /* contributes 16px to vertical dimension   */
  border: 2px solid green;
  /* contributes  4px to vertical dimension   */
  padding: 10px;
  /* contributes 20px to vertical dimension   */
  margin: 0px;
  /* contributes  0px to vertical dimension   */
  text-align: center;
}

#menu div:hover {
  background-color: yellow;
  color: green;
  border-color: red;
}

JavaScript

for (var i = 0; i < JSONdata.animals.length; i++) {
	  if (JSONdata).animals(i).pet == id)
	url = JSONdata.animals(i).url;
	}
	return url;

	// if the url returned is not "undefined", format a string so for a HTML tag with the src attribute set to the returned URL. for information on img see http://www.w3schools.com/tags/tag_img.asp.
	//set the innerHTML property of the element with the unique id of content. hint - document.getElementByID(id).innerHTML = XYZ;

	function loadContent(idName) {
	  url = getURL(idName);
	  document.getElementByID('content').innerHTML = '<img src="" + url + ">';


	}