slideshow.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Status of the Middle East</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript.js"></script>
</head>

<body>
<br />
<div class="container">
  <div id="options">
  <br />
  <br />
  <p>Background Color: <br />
  	<select id="background" name"background" size="1" onChange="changeBackground(this);">
 	  <option>Black</option>
  	  <option>Red</option>
 	  <option>Green</option>
 	  <option>Orange</option>
          <option>Brown</option>
          <option>Blue</option>
	</select>
  </p>
  <p>
    <input type="checkbox" name="timer" onClick="showMe('controls', 'speed');">Automatically change mode after (<span id="range">3</span>) seconds</input>
    <input id="speed" type="range" min="1" max="10" step="1" value="3" onChange="showValue(this.value);"/>
  </p>
  <br />
  <br />
  </div>
  <div id="content">
    <h3>Status of the Arab Spring, 2011</h3>
    <img id="slide" src="images/Arab Spring/arabspring-640x480.jpg" alt="" name="slide" border="0" />
    <br />
    <p id="imgName">images/Arab Spring/arabspring-640x480.jpg</p>
    <div id="controls">
        <a title="First" onClick="document.getElementById('slide').src = getFirstPic();" style="text-
        decoration:underline; color:blue; cursor:pointer;">First</a>
        <a title="Previous" onClick="document.getElementById('slide').src = getPrevPic();" style="text-
        decoration:underline; color:blue; cursor:pointer;">Previous</a>
        <a title="Shuffle" onClick="document.getElementById('slide').src = getRandomPic();" style="text-
        decoration:underline; color:blue; cursor:pointer;">Shuffle</a>
        <a title="Next" onClick="document.getElementById('slide').src = getNextPic();" style="text-
        decoration:underline; color:blue; cursor:pointer;">Next</a>
        <a title="Last" onClick="document.getElementById('slide').src = getLastPic();" style="text-
        decoration:underline; color:blue; cursor:pointer;">Last</a>
        <br />
    </div>
  <!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>