<!DOCTYPE html>
<html>
<head>
<title>My Project</title>
<script src="menu.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="wrapper">
<div "class"='menu'>
<div style='float:left;'>
<img src="Marshall Zoo Logo.png" width="140px" alt="zoo logo" height="60px">
</div>
<div style="text-align:right;">
<script>
mymenu();
</script>
</div>
</div>
<div id='content'>
<script>home();</script>
<background="giraffe0.jpg">
</div>
<header> </header>
</div>
</body>
</html>
^^
This code is my "Source Code"
and the following code is what makes all my pages.
function mymenu()
{
document.write('<ul><li><a href="javascript:contactus();">Contact</a></li><li><a href="javascript:about();">About</a></li><li><a href="javascript:Animals();">Animals</a></li><li><a class="active"href="javascript:home();">Home</a></li></ul><ul><li><ul><li><a href="javascript:anotherpage();">What To Do</a></a></li></ul>');
}
function home()
{
document.getElementById('content').innerHTML = `<table>
<tr>
<td>
Click <a href="Voucher.pdf">Here for a link to a free voucher!</a>
<alt="voucher">
</div>
</div>
</td>
</tr>
<marquee behavior="scroll" direction="right" scrolldelay="800" scrollamount="50">Welcome to marshall zoo! Please browse our website and check out our new arrivals!
<td>
<img src="ZOO MAP.png" alt="zoomap" height="340" usemap="#Map"title="Map"/>
<map name="Map">
<area shape="rect" coords="106,168,148,215" href="animals.html">
<area shape="rect" coords="7,234,137,301" href="home.html">
<area shape="rect" coords="218,310,272,368" href="animals.html">
<area shape="rect" coords="186,190,261,256" href="home.html">
<area shape="rect" coords="383,209,433,267" href="contact.html">
<area shape="rect" coords="481,272,526,319" href="animals.html">
<area shape="rect" coords="558,291,605,339" href="what to do.html">
<area shape="rect" coords="439,365,482,414" href="about.html">
<area shape="rect" coords="517,369,564,418" href="about.html">
<area shape="rect" coords="203,120,245,167" href="animals.html">
<area shape="rect" coords="38,331,88,392" href="what to do.html">
<area shape="rect" coords="264,156,313,217" href="what to do.html">
<area shape="rect" coords="247,73,293,129" href="contact.html">
</map>
<p>We are proudly listed as the 11th best zoo around the world and in the top 2 zoos in the UK as part of the TripAdvisor Travellers Choice Attractions.
During your visit to Marshall Zoo, you will see many species from around the world and can learn more about them at our fantastic daily encounters giving you the chance to see our animals being fed, watch a training session or perhaps just quiz their keepers! </p>
<tr>
</table>`;
}
function Animals()
{
document.getElementById('content').innerHTML = `<table>
<tr>
<td>
<body>
<!-- Add icon library -->
<div class="img-container">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<img src="Tiger_Hero.jpg" alt="Tiger" style="width:100%" class="image">
<div class="overlay">
<div class="text"><font size="4">There are only a few hundred of these precious animals left in the wild, so we are doing all we can to stop them becoming extinct.
Sumatran tigers have webbed paws, which means that they are brilliant swimmers. Explore that Sumatra in Islands and you could see mother and daughter, Kirana and Kasarna, splashing around in the pool or sunbathing on the rocks.
Sumatran tigers are the smallest of all tigers and their low stance lets them creep up on prey unseen. Their stripes are narrower and closer together than those of other tigers.</font></div>
</a>
</div>
</div>
</div><!-- img container -->
<div class="img-container">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<img src="lion-face.jpg" alt="Lion" style="width:100%" class="image">
<div class="overlay">
<div class="text"><font size="4">Iblis, our nine year old male, is an important part of the European Endangered Species Breeding Programme. This is a carefully managed scheme overseeing the breeding of zoo animals in different countries.
You can find our pride of three beautiful lions, Iblis, Kiburi and Kumari next to The Oakfield. Lions enjoy relaxing and lazing around, they spend between 16 and 20 hours each day resting and sleeping. They have few sweat glands so they wisely tend to conserve their energy by resting during the day to conserve their energy at night for when it is cooler.
The Asiatic lion is listed as endangered on the International Union for the Conservation of Nature (IUCN) Red list. </div>
</a>
</div>
</div>
</div><!-- img container -->
<div class="img-container">
<div class="container">
<img src="Rhino.Jpg" alt="Rhino" style="width:100%" class="image">
<div class="overlay">
<div class="text"><font size="4">Reflecting the 'heartland' of India, these swampy flood plains are home to one of the two species of rhino that can be found at Marshall Zoo; here you can find the greater one-horned rhino. These magnificent prehistoric-looking animals enjoy regular dips in the muddy pool, galloping around or grazing on the grasslands.
Just around the corner, over Elephant Bridge, you will also be able to spot two other Asian species exploring their sandy plains and the onager, which is related to the donkey, and the Bactrian camel. Both of these animals are critically endangered in the wild.</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</a>
</div><!-- img container -->
</body>
</td>
</tr>
</table>`;
}
function about()
{
document.getElementById('content').innerHTML = `<table>
<tr>
<td>
<textarea rows="4" cols="50">
Our mission is to conserve biodiversity and other natural resources, both locally and internationally but we rely on the support of thousands to bring it to life!
We engage with over 40,000 children and young people through our conservation educational programmes, and welcome over 500,000 visitors each year to our 140 acre zoological park. In every contact we seek to encourage understanding, and inspire care for the natural world. In essence, we aim to connect people with nature.
Our team of Conservation Biologists run field programmes in the UK & Africa in partnership with communities, statutory agencies and other non-governmental organizations. Find out which species we are working with and the positive, sustainable impacts we are making on our conservation website.
</textarea>
<tr>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head><title>Javascript</title>
<style type="text/css">
.hide{
display: none;
}
#timediv {
background: #fff;
text-align: center;
width: 148px;
color: #000;
border: 1px #ccc groove;
position: relative;
top: -60px;
right: -208px;
}
.body_time{
background: #17c8e8;
padding: 100px;
width: 58px;
border-radius: 50%;
margin: 15% auto;
}
.anim{
}
</style>
</head>
<body onload="">
<div class="anim"></div>
<div class="body_" id="body_"><div id="timediv"></div></div>
<script src="script.js"></script>
</td>
</tr>
</table>`;
}
var interval = setInterval(timestamphome, 1000);
function timestamphome(){
var date;
date = new Date();
var time = document.getElementById('timediv');
time.innerHTML = date.toLocaleTimeString();
}
function contactus()
{
document.getElementById('content').innerHTML = `<table>
<tr>
<td>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a href="https://en-gb.facebook.com/" class="fa fa-facebook"></a>
<a href="https://twitter.com/?lang=en-gb" class="fa fa-twitter"></a>
<marquee behavior="scroll" direction="right" scrolldelay="800" scrollamount="60">Welcome to our contact page where you can find our social media links and our contact form.
<tr>
<td>
<tbody>
<tr>
<td width="210" height="23"><p>
<label for="textfield">Name:</label>
<input name="textfield" type="text" id="textfield" size="30" maxlength="100">
</p>
<p>
<label for="textfield2">Address:</label>
<input name="textfield2" type="text" id="textfield2" size="10">
</p>
<p>
<label for="textfield3">Home Number:</label>
<input name="textfield3" type="text" id="textfield3" size="10">
<input type="checkbox" name="checkbox" id="checkbox">
Preferred method of contact
</p>
<p>
<label for="textfield4">Mobile Number:</label>
<input name="textfield4" type="text" id="textfield4" size="10">
<input type="checkbox" name="checkbox2" id="checkbox2">
Preferred method of contact </p>
<p>
<label for="textfield5">Email Addresss:</label>
<input name="textfield5" type="text" id="textfield5" size="20">
<input type="checkbox" name="checkbox3" id="checkbox3">
Preferred method of contact </p>
<p>Please Give us a reason for contacting us today-</p>
<p>
<input type="checkbox" name="checkbox4" id="checkbox4">
General Enquiry
<input type="checkbox" name="checkbox5" id="checkbox5">
Season Ticket
<input type="checkbox" name="checkbox6" id="checkbox6">
Adoption of an animal
<input type="checkbox" name="checkbox7" id="checkbox7">
Gifts & Zoo Experiences
<input type="checkbox" name="checkbox8" id="checkbox8">
Funding / Donate to us </p>
<p>
<label for="textarea">Your Enquiry<br>
</label>
<textarea name="textarea" cols="30" rows="5"id="textarea"></textarea>
</p>
<p>We wish your visit to be a pleasant one, please use the box below to tell us how we did today. </p>
<p>
<label for="textarea2">Any Comments?<br>
</label>
<textarea name="textarea2" cols="30"
rows="5 id="textarea2"></textarea>
</p>
<p>
<input type="submit" name="submit" id="submit" value="Submit">
<input type="reset" name="reset" id="reset" value="Cancel">
</p></td>
</tr>
</tbody>
</table>
<tr>
<td>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head><title>Javascript</title>
<style type="text/css">
.hide{
display: none;
}
#timediv {
background: #fff;
text-align: center;
width: 148px;
color: #000;
border: 1px #ccc groove;
position: relative;
top: -60px;
right: -208px;
}
.body_time{
background: #17c8e8;
padding: 100px;
width: 58px;
border-radius: 50%;
margin: 15% auto;
}
.anim{
}
</style>
</head>
<body onload="">
<div class="anim"></div>
<div class="body_" id="body_"><div id="timediv"></div></div>
<script src="script.js"></script>
</form>
</div>
</td>
</tr>
</table>`;
}
var interval = setInterval(timestamphome, 1000);
function timestamphome(){
var date;
date = new Date();
var time = document.getElementById('timediv');
time.innerHTML = date.toLocaleTimeString();
}
20
Replies
I have edited the capitals on the code but it still doesn't work.
AdChoices