Changing button colour on mouse-over

Shreya

I was able to create a button by drawing a rectangle, using mouse_response and using javascript to identify a click in the rectangle region.

I am trying to now change the colour of the button when someone positions the mouse on the button (but not yet clicked). Any suggestions on how I can do this?

lvanderlinden

Hi @Shreya

No, sorry, I don't see a quick way of changing the color of a sketchpad element when only hoovering over it (in JavaScript). Perhaps @sebastiaan or @eduard ?

Cheers,

Lotje

sebastiaan

Hi @Shreya ,

This isn't very easy to do, but you can accomplish this behavior by directly listening to mouse events in JavaScript, so basically bypassing the way that OSWeb normally handles mouse responses. I attached an example that illustrates the basic idea.

— Sebastiaan

mouse-hover.osexp

Shreya

Thank you very much. I tried running the attached experiment, however, I am getting an error. I have attached the screen snapshot. Can you take a look?

Screen Shot 2021-03-02 at 7.55.48 AM.png

Shreya

It works fine in an external browser. I guess the Javascript would run only in the browser.

sebastiaan

I guess the Javascript would run only in the browser.

Right, I should have pointed that out. When you start using browser objects like document in an inline_javascript item, then it will no longer run on the desktop, and only in a browser. And that's the case here.

Shreya

Thanks for the clarification.