Untitled

<html>
<head>
<link rel="stylesheet" type="text/css" href="background.css">
<style>
img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;}
</style>
</head>
<body>
<script>
  var callbackFunction = function(data) {
    var wind = data.query.results.channel.wind;
	var dir = 125;
	var sp = wind.speed;

	if(dir>348 && dir<11 ){
		document.write("<center><img  src='.png' alt='pic'></center>");
	}
	if(dir>33.75 && dir<56.25 ){
		document.write("<center><img  src='.png' alt='pic'></center>");
	}
	if(dir>78.75 && dir<101.25 ){

	    //document.getElementById("pic").style.src = "East.png";
		document.write("<center><img  src='East.png' alt='pic'></center>");
	}
	if(dir>123.75 && dir<146,25 ){
		document.write("<center><img  src='East.png' alt='pic'></center>");
	}
	if(dir>168.75 && dir<191.25 ){
		document.write("<center><img  src='.png' alt='pic'></center>");
	}
	if(dir>213.75 && dir<236.25 ){
		document.write("<center><img  src='.png' alt='pic'></center>");
	}
	if(dir>258.75 && dir<281.25 ){
		document.write("<center><img  src='.png' alt='pic'></center>");
	}
	if(dir>303.75 && dir<326.25 ){
		document.write("<center><img  src='background.png' id='pic'></center>");
	}

  };
</script>

<script src="https://query.yahooapis.com/v1/public/yql?q=select wind from weather.forecast where woeid in (select woeid from geo.places(1) where text='burgas, bg')&format=json&callback=callbackFunction"></script>
</body>
</html>