I'm trying to create an HTML page that will change depending on what is in the current directory. There is an image box, and buttons that change the image. But because this page is identical throughout different pages, is there any way to add or remove these buttons depending on how many images are in the same directory?
The idea is that the site will then be expandable with minimal effort for changing each page, such that other users can do it. In the file below, it is the changePage button that needs to be removed.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head id="head">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>
Maths Study and Revision
</title>
<link href="./styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function changePage(page) {
var img = document.getElementById("image");
img.src="./pages/page_" + page + ".png";
return false;
}
</script>
</head>
<body background="/img/image.jpg">
<div id="container">
<div id="header">
<h1 style="border-style:solid;border-color:White;border-width:1px;">
Maths Study and Revision
</h1>
</div>
<div id="menuwrapper">
<ul>
<li>
<a href="#">Higher Tier</a>
<ul>
<li>
<a href="#">Calculator Paper</a>
<ul>
<li>
<a href="/j13/hc/index.html">June 2013</a>
</li>
<li>
<a href="/m13/hc/index.html">March 2013</a>
</li>
<li>
<a href="/n12/hc/index.html">November 2012</a>
</li>
<li>
<a href="/j12/hc/index.html">June 2012</a>
</li>
</ul>
</li>
<li>
<a href="#">Non-Calculator Paper</a>
<ul>
<li>
<a href="/j13/hn/index.html">June 2013</a>
</li>
<li>
<a href="/m13/hn/index.html">March 2013</a>
</li>
<li>
<a href="/n12/hn/index.html">November 2012</a>
</li>
<li>
<a href="/j12/hn/index.html">June 2012</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Foundation Tier</a>
<ul>
<li>
<a href="#">Calculator Paper</a>
<ul>
<li>
<a href="/j13/fc/index.html">June 2013</a>
</li>
<li>
<a href="/m13/fc/index.html">March 2013</a>
</li>
<li>
<a href="/n12/fc/index.html">November 2012</a>
</li>
<li>
<a href="/j12/fc/index.html">June 2012</a>
</li>
</ul>
</li>
<li>
<a href="#">Non-Calculator Paper</a>
<ul>
<li>
<a href="/j13/fn/index.html">June 2013</a>
</li>
<li>
<a href="/m13/fn/index.html">March 2013</a>
</li>
<li>
<a href="/n12/fn/index.html">November 2012</a>
</li>
<li>
<a href="/j12/fn/index.html">June 2012</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="intro">
<p style="float:left;margin-left:10px;margin-bottom:10px;">
<object type='text/plain' data='./title.html' height="50px" width="800px"></object>
</p>
</div>
<div id="exam">
<img src="./pages/page_1.png" id="image">
</div>
<div class="col1">
<button onclick="changePage('1')">Page 1</button>
<button onclick="changePage('2')">Page 2</button>
<button onclick="changePage('3')">Page 3</button>
<button onclick="changePage('4')">Page 4</button>
<button onclick="changePage('5')">Page 5</button>
<button onclick="changePage('6')">Page 6</button>
<button onclick="changePage('7')">Page 7</button>
<button onclick="changePage('8')">Page 8</button>
<button onclick="changePage('9')">Page 9</button>
<button onclick="changePage('10')">Page 10</button>
<button onclick="changePage('11')">Page 11</button>
<button onclick="changePage('12')">Page 12</button>
<button onclick="changePage('13')">Page 13</button>
<button onclick="changePage('14')">Page 14</button>
<button onclick="changePage('15')">Page 15</button>
<button onclick="changePage('16')">Page 16</button>
<button onclick="changePage('17')">Page 17</button>
<button onclick="changePage('18')">Page 18</button>
<button onclick="changePage('19')">Page 19</button>
<button onclick="changePage('20')">Page 20</button>
<button onclick="changePage('21')">Page 21</button>
<button onclick="changePage('22')">Page 22</button>
<button onclick="changePage('23')">Page 23</button>
<button onclick="changePage('24')">Page 24</button>
</div>
<div id="footer">
</div>
</div>
</body>
Any help will be greatly appreciated!
