Javascript onmouseover does not work

Hello everyone.

I am new on coding so any help will be greatly appreciated.

I have been trying a code in Javascript for my website concerning how a circular menu should behave when the page is scrolled and when the mouse hovers over it, but could not get the "onmouseover" function to work at all.  Finally I got it working in jsfiddle ( https://jsfiddle.net/stonerdan/Ldfa3o8z/94/ ), but when I tried to copy it to Dreamweaver I got no results concerning the onmouseover function (the onscroll works okay).

I paste here the Javascript of my own webpage which is similar to the jsfiddle code and if anyone has any idea how to correct it to make the onmouseover work, is quite welcome 🙂

Thanks,

Daniel

HTML

<div class="menucontainer" id="rectangle">
<div class="circmenu" id="circle">
<img src="../images/photo.jpg" alt="menu">
</div>

</div>

Javascript

window.onscroll=function() {onScroll()};

function onScroll() {
var x = document.getElementById("circle");

if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
x.style.width = "30px";
x.style.height = "30px";
x.style.opacity= "0.05";
}

else {
x.style.width = "80px";
x.style.height = "80px";
x.style.opacity = "0.5";
}
}

document.getElementById("rectangle").onmouseover = function() {lolo()};
function lolo() {
document.getElementById("circle").style.width = "80px";
document.getElementById("circle").style.height = "80px";
document.getElementById("circle").style.opacity = "1.0";
}

Follow Up

Solved as I saw that script works when put in the end (just before </body> bracket) otherwise it won't load.