Source Code diatas adalah :
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 330px;
border: 1px solid black;
}
</style>
<script>
function light(x) {
var pic;
if (x == 1) {
pic = "pku1.jpg"
}else if (x == 2) {
pic = "pku2.jpg"
}else if (x == 3) {
pic = "pku3.jpg"
}else if (x == 4) {
pic = "pku4.jpg"
}else if (x == 5) {
pic = "pku5.jpg"
}
document.getElementById('imgPKU').src = pic;
}
</script>
</head>
<body>
<h1>HTML VII - Responsive & JavaScript</h1>
<br>
<div class="city">
<h2>Indonesia</h2>
<p style='vertical-align:top;text-align:justify;'>
<img id='imgPKU' style='float:left;' width=150 height=140 src='mpr.jpg'>
Indonesia adalah Negara yang sangat besar. Wilayah Indonesia meliputi 17 ribu pula, enam ribu diantaranya malah belum memiliki nama. Penduduknya mencapai 240 juta, menempati urutan keempat terbesar didunia setelah Cina, India dan Amerika. Indonesia juga memiliki kekayaan alam yang sangat banyak dan membuat iri Negara-negara lain.</p>
</div>
<div class="city">
<h2>Jakarta</h2>
<p>bu kota Republik Indonesia, Jakarta adalah kota metropolitan yang luas dan besar dengan populasi lebih dari 9 juta jiwa. Pada siang hari jumlah ini bertambah 2 juta ketika para Komuter datang ke Jakarta untuk bekerja dan pulang lagi ke asal mereka pada malam hari.
Terletak di pantai utara bagian barat pulau Jawa, provinsi Jakarta telah berkembang pesat selama bertahun-tahun, menyerap banyak desa.</p>
</div>
<div class="city">
<h2>Pekanbaru</h2>
<p>Pekanbaru adalah ibu kota provinsi Riau...</p>
<p><img id='imgPKU' width=246 height=180 src='pku1.jpg'></p>
<button type="button" onclick="light(1)"> 1</button>
<button type="button" onclick="light(2)"> 2 </button>
<button type="button" onclick="light(3)"> 3</button>
<button type="button" onclick="light(4)"> 4 </button>
<button type="button" onclick="light(5)"> 5 </button>
</div>
</body>
</html>
