Highlighted

Javascript onmouseover does not work

Community Beginner ,
Oct 20, 2019

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.

Views

69

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Javascript onmouseover does not work

Community Beginner ,
Oct 20, 2019

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.

Views

70

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 20, 2019 0
Adobe Community Professional ,
Oct 20, 2019

Copy link to clipboard

Copied

Please put your Follow Up remarks in a new post. That way we can mark it as Correct.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 20, 2019 0
Community Beginner ,
Oct 21, 2019

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 21, 2019 0