Chie

<!
DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>PUP MAP</title>
<link rel="stylesheet" href="map.css">
<head>
<center><img src="kulit.jpeg"></center>
</head>
<body background="back.jpg">
<p align="center">
</head>
<body>
<center><img style="padding-left:48px" src="map.png" width="650p
x" height="488px" alt="map" usemap="#pupmap"></center>
<map name="pupmap">
<area shape="circle" coords="250,261,12" title="Amphithe
ater" id="one_button" >
<area shape="circle" coords="177,47,10" title="Banda Kaw
ayan, Sining Lahi Headquarters" id="two_button">
<area shape="circle" coords="223,456,10" title="Building
and Grounds Maintenance Office" id="three_button">
<area shape="circle" coords="445,203,15" title="Catwalk
" id="four_button">
<area shape="circle" coords="326,210,15" title="Centenni
al Monument" id="five_button">
<area shape="poly" coords="87,199,101,208,125,217,
133,226,150,233,163,242,176,226,129,198,111,189,100,180,98,176" title="Charlie d
el Rosario Student Development Center " id="six_button"/>
<area shape="circle" coords="592,437,15" title="East Gat
e" id="seven_button">
<area shape="circle" coords="344,286,15" title="Flag Pol
e" id="eight_button">
<area shape="circle" coords="431,307,15" title="Grandsta
nd" id="nine_button"/>
<area shape="poly" coords="466,57,466,72,466,89,46
5,108,468,113,492,113,522,113,554,113,570,115,577,115,575,104,579,90,576,63,576,
58,570,56,524,56,491,56,469,57" title="Gymnasium" id="ten_button"/>
<area shape="circle" coords="322,387,30" title=" Interfa
ith Chapel" id="eleven_button">
<area shape="poly" coords="103,60,86,82,76,104,74,
109,93,122,88,132,84,139,81,146,101,155,143,182,184,203,189,193,175,161,167,128,
164,95" title="Laboratory High School" id="twelve_button">
<area shape="circle" coords="274,219,30" title="Lagoon"
id="thirteen_button">
<area shape="circle" coords="241,334,15" title=" Main Bu
ilding Dome" id="fourtheen_button">
<area shape="poly" coords="232,389,262,389,258,442
,257,465,268,469,263,481,239,476,225,472,229,391" title="Main Building - East Wi
ng" id="fifteen_button">
,269,328,280,348,347,312,354,306,364,301,360,286" title="Main Building - North W
ing" id="sixteen_button">
,183,350,191,368,200,393,200,396,212,416,223,426,226,443,189,456,188,464,149,403
" title="Main Building - South Wing" id="seventeen_button">
,238,341,250,314" title="Main Building - West Wing" id="eighteen_button">
<area shape="circle" coords="594,215,10" title="Main Gat
e" id="nineteen_button">
<area shape="circle" coords="358,265,10" title="Nemesio
E. Prudente Freedom Park" id="twenty_button">
88,135,195,154,210,149,218,205,241,205,233,154,271,138,282,115,286,95,246,92,229
,99" title="Ninoy Aquino Library and Learning Resources Center" id="twenty1_butt
on">
<area shape="circle" coords="420,153,10" title=" Open Co
urt" id="twenty2_button">
<area shape="circle" coords="307,456,10" title=" CNFS Bu
ilding" id="twenty3_button">
<area shape="circle" coords="499,353,50" title=" Oval Op
en Field" id="twenty4_button">
38,148,335,46" title=" P.E. Building" id="twenty5_button">
<area shape="poly" coords="5,21,70,340,86,481,90,5
12,112,520,1,523" title=" Pasig River" id="twenty6_button">
<area shape="circle" coords="145,455,20" title=" Pasig R
iver Ferry -Sta. Mesa Station" id="twenty7_button">
,478,241,459,240,349,316" title="Access Road" id="twenty8_button">
<area shape="circle" coords="134,235,10" title="Public R
estroom" id="twenty9_button">
,514,140,516,144,449,46,68,18,29" title=" PUP Linear Park" id="thirty_button">
<area shape="circle" coords="595,238,10" title="PUP Mura
l and the Shrine of Heroism " id="thirty1_button">
<area shape="circle" coords="371,212,20" title="PUP Obel
isk" id="thirty2_button">
<area shape="poly" coords="46,41,42,42,54,50,52,63
,59,84,68,78,67,56,77,56,80,48,84,41" title=" PUP Property Building and Motorpoo
l " id="thirty3_button">
<area shape="circle" coords="596,192,10" title="PUP Pylo
n " id="thirty4_button">
,137,308,105,296" title="Sampaguita Building" id="thirty5_button">
<area shape="circle" coords="462,234,8" title="Student P
avilion" id="thirty6_button">
<area shape="poly" coords="421,48,425,103,361,99,359,53"
title=" Swimming Pool" id="thirty7_button">
<area shape="rect" coords="484,144,534,180" id="thirty8_
button">
<area shape="circle" coords="186,82,20" title=" Water Ta
nk " id="thirty9_button">
<area shape="circle" coords="604,147,20" title=" West Ga
te" id="fourty_button">

<img width="30" height="30" src="icon.png" id="icon1">

<div id="mainmodal" class="modal">

<div id="one" class="modal">
<div class="detail">
<h4>Amphitheater<h4>
<img width="200" height="150" src="one.j
pg">
</div>
</div>

<div id="two" class="modal">
<h4>Banda Kawayan, Sining Lahi Headquart
ers<h4>
<img width="200" height="150" src="two.j
pg">
</div>
</div>

<div id="three" class="modal">
<h4>Building and Grounds Maintenance Off
ice<h4>
<img width="200" height="150" src="three
.jpg">
</div>
</div>

<div id="four" class="modal">
<h4>Catwalk<h4>
<img width="200" height="150" src="four.
jpg">
</div>
</div>

<div id="five" class="modal">
<h4>Centennial Monument<h4>
<img width="200" height="150" src="five.
jpg">
</div>
</div>

<div id="six" class="modal">
<h4>Charlie del Rosario Student Developm
ent Center<h4>
<img width="200" height="150" src="six.j
pg">
</div>
</div>

<div id="seven" class="modal">
<h4>East Gate<h4>
<img width="200" height="150" src="seven
.jpg">
</div>
</div>

<div id="eight" class="modal">
<h4>Flag Pole<h4>
<img width="200" height="150" src="eight
.jpg">
</div>
</div>

<div id="nine" class="modal">
<h4>Grandstand<h4>
<img width="200" height="150" src="nine.
jpg">
</div>
</div>

<div id="ten" class="modal">
<h4>Gymnasium<h4>
<img width="200" height="150" src="ten.j
pg">
</div>
</div>

<div id="eleven" class="modal">
<h4> Interfaith Chapel<h4>
<img width="200" height="150" src="eleve
n.jpg">
</div>
</div>

<div id="twelve" class="modal">
<h4>Laboratory High School<h4>
<img width="200" height="150" src="twelv
e.jpg">
</div>
</div>

<div id="thirteen" class="modal">
<h4>Lagoon<h4>
<img width="200" height="150" src="thirt
een.jpg">
</div>
</div>

<div id="fourtheen" class="modal">
<h4> Main Building Dome<h4>
<img width="200" height="150" src="fourt
heen.jpg">
</div>
</div>

<div id="fifteen" class="modal">
<h4>Main Building - East Wing<h4>
<img width="200" height="150" src="fifte
en.jpg">
</div>
</div>

<div id="sixteen" class="modal">
<h4>Main Building - North Wing<h4>
<img width="200" height="150" src="sixte
en.jpg">
</div>
</div>

<div id="seventeen" class="modal">
<h4>Main Building - South Wing<h4>
<img width="200" height="150" src="seven
teen.jpg">
</div>
</div>

<div id="eighteen" class="modal">
<h4>Main Building - West Wing<h4>
<img width="200" height="150" src="eight
een.jpg">
</div>
</div>

<div id="nineteen" class="modal">
<h4> Main Gate<h4>
<img width="200" height="150" src="ninet
een.jpg">
</div>
</div>

<div id="twenty" class="modal">
<h4>Nemesio E. Prudente Freedom Park<h4>
<img width="200" height="150" src="twent
y.jpg">
</div>
</div>
<div id="twenty1" class="modal">
<h4>Ninoy Aquino Library and Learning Re
sources Center<h4>
y1.jpg">
</div>
<h4> Open Court<h4>
y2.jpg">
</div>
<h4>CNFS Building<h4>
y3.jpg">
</div>
<h4>Oval Open Field<h4>
y4.jpg">
</div>
<h4>P.E. Building<h4>
y5.jpg">
</div>
<h4> Pasig River<h4>
y6.jpg">
</div>
<h4> Pasig River Ferry - Sta. Mesa Stati
on<h4>
y7.jpg">
</div>
<h4>Access Road<h4>
y8.jpg">
</div>
<h4>Public Restroom<h4>
y9.jpg">
</div>
</div>
<div id="thirty" class="modal">
<h4> PUP Linear Park<h4>
y.jpg">
</div>
</div>
<div id="thirty1" class="modal">
<h4> PUP Mural and the Shrine of Heroism
<h4>
y1.jpg">
</div>
<h4> PUP Obelisk<h4>
y2.jpg">
</div>
<h4>PUP Property Building and Motorpool
<h4>
y3.jpg">
</div>
<h4> PUP Pylon <h4>
y4.jpg">
</div>
<h4>Sampaguita Building<h4>
y5.jpg">
</div>
<h4> Student Pavilion<h4>
y6.jpg">
</div>
<h4> Swimming Pool<h4>
y7.jpg">
</div>
<h4>Tennis Open Court<h4>
y8.jpg">
</div>
<h4>Water Tank<h4>
y9.jpg">
</div>
</div>

<div id="fourty" class="modal">
<h4> West Gate<h4>
<img width="200" height="150" src="fourt
y.jpg">
</div>
</div>
</div>
<center>
<h3><b>PUP MAP</b></h3>
</center>

<script>
var modal = document.getElementById('mainmodal');
//one--------------------------------------------------
var mouse_one = document.getElementById("one");
var one_button = document.getElementById("one_button");
var icon1 = document.getElementById("icon1");
one_button.onclick = function() {
icon1.style.display = "block";
modal.style.display = "block";
mouse_one.style.display = "block";
}
mouse_one.onclick = function() {
icon1.style.display = "none";
modal.style.display = "none";
mouse_one.style.display = "none";
}
//two--------------------------------------------------
var mouse_two = document.getElementById("two");
var two_button = document.getElementById("two_button");
two_button.onclick = function() {
mouse_two.style.display = "block";
}
mouse_two.onclick = function() {
mouse_two.style.display = "none";
}
//three--------------------------------------------------
var mouse_three = document.getElementById("three");
var three_button = document.getElementById("three_button");
three_button.onclick = function() {
mouse_three.style.display = "block";
}
mouse_three.onclick = function() {
mouse_three.style.display = "none";
}
//four--------------------------------------------------
var mouse_four = document.getElementById("four");
var four_button = document.getElementById("four_button");
four_button.onclick = function() {
mouse_four.style.display = "block";
}
mouse_four.onclick = function() {
mouse_four.style.display = "none";
}
//five--------------------------------------------------
var mouse_five = document.getElementById("five");
var five_button = document.getElementById("five_button");
five_button.onclick = function() {
mouse_five.style.display = "block";
}
mouse_five.onclick = function() {
mouse_five.style.display = "none";
}
//six--------------------------------------------------
var mouse_six = document.getElementById("six");
var six_button = document.getElementById("six_button");
six_button.onclick = function() {
mouse_six.style.display = "block";
}
mouse_six.onclick = function() {
mouse_six.style.display = "none";
}
//seven--------------------------------------------------
var mouse_seven = document.getElementById("seven");
var seven_button = document.getElementById("seven_button");
seven_button.onclick = function() {
mouse_seven.style.display = "block";
}
mouse_seven.onclick = function() {
mouse_seven.style.display = "none";
}
//eight--------------------------------------------------
var mouse_eight = document.getElementById("eight");
var eight_button = document.getElementById("eight_button");
eight_button.onclick = function() {
mouse_eight.style.display = "block";
}
mouse_eight.onclick = function() {
mouse_eight.style.display = "none";
}
//nine--------------------------------------------------
var mouse_nine = document.getElementById("nine");
var nine_button = document.getElementById("nine_button");
nine_button.onclick = function() {
mouse_nine.style.display = "block";
}
mouse_nine.onclick = function() {
mouse_nine.style.display = "none";
}
//ten--------------------------------------------------
var mouse_ten = document.getElementById("ten");
var ten_button = document.getElementById("ten_button");
ten_button.onclick = function() {
mouse_ten.style.display = "block";
}
mouse_ten.onclick = function() {
mouse_ten.style.display = "none";
}
//eleven--------------------------------------------------
var mouse_eleven = document.getElementById("eleven");
var eleven_button = document.getElementById("eleven_button");
eleven_button.onclick = function() {
mouse_eleven.style.display = "block";
}
mouse_eleven.onclick = function() {
mouse_eleven.style.display = "none";
}
//twelve--------------------------------------------------
var mouse_twelve = document.getElementById("twelve");
var twelve_button = document.getElementById("twelve_button");
twelve_button.onclick = function() {
mouse_twelve.style.display = "block";
}
mouse_twelve.onclick = function() {
mouse_twelve.style.display = "none";
}
//thirteen--------------------------------------------------
var mouse_thirteen = document.getElementById("thirteen");
var thirteen_button = document.getElementById("thirteen_button")
;
thirteen_button.onclick = function() {
mouse_thirteen.style.display = "block";
}
mouse_thirteen.onclick = function() {
mouse_thirteen.style.display = "none";
}
//fourtheen--------------------------------------------------
var mouse_fourtheen = document.getElementById("fourtheen");
var fourtheen_button = document.getElementById("fourtheen_button
");
fourtheen_button.onclick = function() {
mouse_fourtheen.style.display = "block";
}
mouse_fourtheen.onclick = function() {
mouse_fourtheen.style.display = "none";
}
//fifteen--------------------------------------------------
var mouse_fifteen = document.getElementById("fifteen");
var fifteen_button = document.getElementById("fifteen_button");
fifteen_button.onclick = function() {
mouse_fifteen.style.display = "block";
}
mouse_fifteen.onclick = function() {
mouse_fifteen.style.display = "none";
}
//sixteen--------------------------------------------------
var mouse_sixteen = document.getElementById("sixteen");
var sixteen_button = document.getElementById("sixteen_button");
sixteen_button.onclick = function() {
mouse_sixteen.style.display = "block";
}
mouse_sixteen.onclick = function() {
mouse_sixteen.style.display = "none";
}
//seventeen--------------------------------------------------
var mouse_seventeen = document.getElementById("seventeen");
var seventeen_button = document.getElementById("seventeen_button
");
var icon17= document.getElementById("icon17");
seventeen_button.onclick = function() {
mouse_seventeen.style.display = "block";
}
mouse_seventeen.onclick = function() {
mouse_seventeen.style.display = "none";
}
// eighteen --------------------------------------------------
var mouse_eighteen = document.getElementById("eighteen");
var eighteen_button = document.getElementById("eighteen_button")
;
eighteen_button.onclick = function() {
mouse_eighteen.style.display = "block";
}
mouse_eighteen.onclick = function() {
mouse_eighteen.style.display = "none";
}
// nineteen --------------------------------------------------
var mouse_nineteen = document.getElementById("nineteen");
var nineteen_button = document.getElementById("nineteen_button")
;
nineteen_button.onclick = function() {
mouse_nineteen.style.display = "block";
}
mouse_nineteen.onclick = function() {
mouse_nineteen.style.display = "none";
}
// twenty --------------------------------------------------
var mouse_twenty = document.getElementById("twenty");
var twenty_button = document.getElementById("twenty_button");
twenty_button.onclick = function() {
mouse_twenty.style.display = "block";
}
mouse_twenty.onclick = function() {
mouse_twenty.style.display = "none";
}// twenty1 --------------------------------------------------
var mouse_twenty1 = document.getElementById("twenty1");
var twenty1_button = document.getElementById("twenty1_button");
twenty1_button.onclick = function() {
mouse_twenty1.style.display = "block";
}
mouse_twenty1.onclick = function() {
mouse_twenty1.style.display = "none";
}// twenty2 --------------------------------------------------
}
}// twenty3 --------------------------------------------------
}
}// twenty4 --------------------------------------------------
}
}// twenty5 --------------------------------------------------
}
}// twenty6 --------------------------------------------------
}
}// twenty7 --------------------------------------------------
}
}// twenty8 --------------------------------------------------
}
}// twenty9 --------------------------------------------------
}
}// thirty --------------------------------------------------
var mouse_thirty = document.getElementById("thirty");
var thirty_button = document.getElementById("thirty_button");
thirty_button.onclick = function() {
mouse_thirty.style.display = "block";
}
mouse_thirty.onclick = function() {
mouse_thirty.style.display = "none";
}// thirty1 --------------------------------------------------
var mouse_thirty1 = document.getElementById("thirty1");
var thirty1_button = document.getElementById("thirty1_button");
thirty1_button.onclick = function() {
mouse_thirty1.style.display = "block";
}
mouse_thirty1.onclick = function() {
mouse_thirty1.style.display = "none";
}// thirty2 --------------------------------------------------
}
}// thirty3 --------------------------------------------------
}
}// thirty4 --------------------------------------------------
}
}// thirty5 --------------------------------------------------
}
}// thirty6 --------------------------------------------------
}
}// thirty7 --------------------------------------------------
}
}// thirty8 --------------------------------------------------
}
}// thirty9 --------------------------------------------------
}
}
// fourty --------------------------------------------------
var mouse_fourty = document.getElementById("fourty");
var fourty_button = document.getElementById("fourty_button");
fourty_button.onclick = function() {
mouse_fourty.style.display = "block";
}
mouse_fourty.onclick = function() {
mouse_fourty.style.display = "none";
}
</script>
</body>
</html>

Chie

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chie

Uploaded by

Copyright:

Available Formats

<!

You might also like