• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Javascript onmouseover does not work

Community Beginner ,
Oct 20, 2019 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

257

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
community guidelines

correct answers 1 Correct answer

Community Beginner , Oct 21, 2019 Oct 21, 2019

Votes

Translate

Translate
Community Expert ,
Oct 20, 2019 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.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Beginner ,
Oct 21, 2019 Oct 21, 2019

Copy link to clipboard

Copied

LATEST

Votes

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
community guidelines