Upload
vuongmien
View
216
Download
1
Embed Size (px)
Citation preview
Important – Copy the code below directly into notepad and save as “filename.html”. Do not edit the code. Once saved, the webpage will open automatically.
<!DOCTYPE HTML>
<html>
<head>
<title>UQ Transport Options</title>
<style>
#map {
height: 50%;
float: left;
position: relative;
}
h1 {
text-align: center;
}
#routes {
float: left;
position: relative;
margin: 15px;
padding-top: 3%;
}
#section2 {
color: Blue;
}
#section3 {
color: Red;
}
#section4 {
color: Green;
}
#section2, #section3, #section4 {
font-weight: bold;
display: none;
}
img {
border: 2px solid;
}
ul {
color: black;
}
#gatton, #ipswich {
clear:left
}
#gatmap {
float: left;
margin-top: 15px;
margin-right: 15px;
position: relative;
}
#gatroute {
padding-top: 5%;
font-weight: bold;
}
#ipsmap {
float: left;
position: relative;
margin-right: 15px;
}
#ipsroute {
padding-top: 4%;
font-weight: bold
}
#ref{
float: left;
clear: left;
}
html{
background: URL(logo.jpg);
}
</style>
<script>
function ShowItem() {
var option = document.getElementById("stops").value;
if (option == "lakes") {
document.getElementById("section2").style.display ="block";
document.getElementById("section3").style.display ="none";
document.getElementById("section4").style.display ="none";
console.log("lakes");
} else if (option == "CPlace") {
document.getElementById("section3").style.display ="block";
document.getElementById("section2").style.display ="none";
document.getElementById("section4").style.display ="none";
console.log("CPlace");
} else if (option == "citycat"){
document.getElementById("section4").style.display ="block";
document.getElementById("section2").style.display ="none";
document.getElementById("section3").style.display ="none";
console.log("citycat");
} else{
document.getElementById("section4").style.display ="none";
document.getElementById("section2").style.display ="none";
document.getElementById("section3").style.display ="none";
}
}
</script>
</head>
<body>
<h1>Transport Map</h1>
<div id="map">
<h2>St Lucia</h2>
<img src="map.jpg" alt="St Lucia Campus Map"/>
</div>
<div id="routes">
<form id="survey" action="#" method="post">
<div id="section1">
<label for="stops"><strong>Which Stop Are You Travelling From?</strong></label>
<p><select id="stops" onchange="ShowItem();">
<option value="select">Select...</option>
<option value="lakes">UQ Lakes</option>
<option value="CPlace">Chancellor's Place</option>
<option value="citycat">CityCat Terminal</option>
</select></p>
</div>
</form>
<div id="section2">
UQ Lakes:<br>
<img src="lakes.jpg" alt="UQ Lakes Bus Stop"/><br>
Routes:
<ul>
<li>29 (Stop E) - Every 5-10 mins from 6:56 AM - 7:26 PM</li>
<li>109 (Stop D) - Every 5-10 mins from 7:06 AM - 9:15 PM</li>
<li>139 (Stop B) - Every 10-15 mins from 10:03 AM - 6:21 PM</li>
<li>169 (Stop A) - Every 15-20 mins from 6:56 AM - 9:11 PM</li>
<li>192 (Stop D) - Every 20-30 mins from 6:20 AM - 6:10 PM</li>
<li>209 (Stop C) - Every 10-15 mins from 10:03 AM - 9:18 PM</li>
</ul>
</div>
<div id="section3">
Chancellor's Place:<br>
<img src="cplace.jpg" alt="Chancellor's Place Bus Stop"/><br>
Routes:
<ul>
<li>428 (Stop A) - Every 15-30 mins from 7:56 AM - 10:10 PM</li>
<li>427 (Stop B) - Every 30-60 mins from 12:05 PM - 7:00 PM</li>
<li>432 (Stop B) - Every 15-45 mins from 8:30 AM - 8:44 PM</li>
<li>411 (Stop C) - Every 20-30 mins from 6:25 AM - 10:40 PM</li>
<li>414 (Stop C) - Every 60 mins from 9:00 AM - 6:00 PM</li>
<li>402 (Stop D) - Every 10-20 mins from 7:33 AM - 9:23 PM</li>
<li>412 (Stop D) - Every 10-15 mins from 5:50 AM - 11:37 PM</li>
<li>Intercampus Bus (Stop A) - Departs 6:30 AM, 7:45 AM, 2:30 PM, 5:00 PM</li>
</ul>
</div>
<div id="section4">
CityCat Terminal:<br>
<img src="cat.jpg" alt="CityCat Ferry Terminal"/><br>
Departures:
<ul>
<li>First ferry - 5:43 AM</li>
<li>Last ferry - 11:45 PM</li>
<li>Every 30 mins from 5:43 AM - 8:45 AM & 6:45 PM - 11:45 PM</li>
<li>Every 15 mins from 8:45 AM - 6:45 PM</li>
</ul>
</div><br>
</div>
<div id="gatton">
<div id="gatmap">
<h2>Gatton Campus</h2>
<img src="gatton.jpg" alt="Gatton Campus Bus Stop"/>
</div>
<div id="gatroute">
Route: 539 - Every 20-40 mins from 5:36 AM - 6:59 PM
</div>
</div>
<div id="ipswich">
<div id="ipsmap">
<h2>Ipswich Campus</h2>
<img src="ipswich.jpg" alt="Ipswich Campus Bus Stop"/>
</div>
<div id="ipsroute">
Route: 515 - Every 20-30 mins from 6:08 AM - 9:39 PM
</div>
</div>
<div id="ref">
All images sourced from the <a href="uq.edu.au">University of Queensland</a> website.
</div>
</body>
</html>
Save the images below as:
Cat.jpg – cplace.jpg – Gatton.jpg – Ipswich.jpg – lakes.jpg – logo.jpg – map.jpg
In order