<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-image:
<img src="images/map.jpg">sunny.jpg" style="width:300px; height:400px ">
</div>
background-repeat: no-repeat; } .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 300px; height: 400px; } .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } </style> </head> <body> <h2>Forcast</h2> <a id="galle" href="file:///C:/Users/Com/Desktop/Testing%20Map.html#">#" onclick="showForcast('rain');return false;" style="position: fixed; left: 130px; top: 440px;">..</a> <a id="colombo" href="file:///C:/Users/Com/Desktop/Testing%20Map.html#">#" onclick="showForcast('sunny');return false;" style="position: fixed; left: 100px; top: 400px;">..</a>
<div id="rainImagePopup" class="modal">
<div class="modal-content">
<span id="rainCloseSpan" class="close">×</span>
<img src="file:///C:/Users/Com/Desktop/rain.jpg">rain.jpg" style="width:300px; height:400px ">
</div>
</div>
<div id="sunnyImagePopup" class="modal">
<div class="modal-content">
<span id="sunnyCloseSpan" class="close">×</span>
<img src="file:///C:/Users/Com/Desktop/sunny.jpg">sunny.jpg" style="width:300px; height:400px ">
</div>
</div>
<script>
function showForcast(type){
if(type == 'rain'){
rainImagePopup.style.display = "block";
}
if(type == 'sunny'){
sunnyImagePopup.style.display = "block";
}
}
var rainImagePopup = document.getElementById('rainImagePopup');
var rainSpan = document.getElementById("rainCloseSpan");
rainSpan.onclick = function() {
rainImagePopup.style.display = "none";
}
var sunnyImagePopup = document.getElementById('sunnyImagePopup');
var sunnySpan = document.getElementById("sunnyCloseSpan");
sunnySpan.onclick = function() {
sunnyImagePopup.style.display = "none";
}
window.onclick = function(event) {
if (event.target == rainImagePopup) {
rainImagePopup.style.display = "none";
}
if (event.target == sunnyImagePopup) {
sunnyImagePopup.style.display = "none";
}
}
</script>
</body>
</html>
