maptest

Monthly Drought Monitoring Bulletin

<!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">&times;</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">&times;</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>
Details