Ellehammerobservatoriet

Vi søger at holde web-siderne stabile, men får vi behov for det, ændrer vi linkene uden varsel. Skulle linkene ikke virke, så prøv at genbesøge vores web-side og se om der er sket ændringer.

Billedet for lokationen:

Kopier nedenstående ind som html og ret “Point_Ellehammer_Weather.png” med navnet på observatoriet. De navne vi har brugt kan findes på linkene til observationsudsigterne. Erstat gerne også alt-beskrivelsen.

<img decoding="async" src="https://ellehammerobservatorium.dk/wp-content/uploads/forecasts/Point_Ellehammer_Weather.png" alt="Vejrudsigt for Ellehammerobservatoriet"/>

Billedet for Danmark med markering af lokation med “slider”:

Kopier nedenstående ind som html og ret “Map_Ellehammer_Weather.png” med navnet på observatoriet:

<script>
const weatherSideVerticalOffset = 1;  // Hack to prevent roll-over from previous image.                                                                                                                         
var   weatherSideSlider = null;
var   weatherSideImage = null;

function setWeatherSideImage(index)
{
    weatherSideImage.style.backgroundPosition = "0px -"+ (weatherSideVerticalOffset + (weatherSideImage.offsetHeight * index)) + "px";
}

function weatherSideImageUpdate ()
{
    const width = weatherSideSlider.offsetWidth + "px";

    weatherSideImage.style.width = width;
    weatherSideImage.style.height = width;
    weatherSideImage.style.backgroundSize = width;

    setWeatherSideImage(weatherSideSlider.value);
}

document.addEventListener('DOMContentLoaded', function() {
    weatherSideSlider = document.getElementById('weatherSideSlider');
    weatherSideImage = document.getElementById('weatherSideImage');
    
    weatherSideImageUpdate ();

    weatherSideSlider.oninput = function() {
        setWeatherSideImage(weatherSideSlider.value);
    };
});
                          
window.addEventListener('resize', function() {
    weatherSideImageUpdate ();
});
</script>

<div>
    <div style="position: relative; width: 200px; height: 200px; background-size: 200px; background-image:url(https://ellehammerobservatorium.dk/wp-content/uploads/forecasts/Map_Ellehammer_Weather.png)" id="weatherSideImage"></div>
    <input type="range" min="0" max="60" value="0" style="height: 20px" id="weatherSideSlider">
</div>