Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Please put your Follow Up remarks in a new post. That way we can mark it as Correct.
Copy link to clipboard
Copied