Hide and show issues

Hello all

I am trying to make a box show and hide when I mouse over an image.
What I have tried:
1 hidden the box on load (box30)
2 On the image (image83) property i add onMouseIn typed in(box30_onMouseIn)
3 I added onMouseOut typed in (box30_onMouseOut)
4 Added the show and hide lines for box30
My code looks like this but when I preview it no box30???

export function image83_onMouseIn(event) {$w(‘#box30’).show(effectName, effectOptions)
//Add your code for this event here:

export function image83_onMouseOut(event) {$w(‘#box30’).hide(effectName, effectOptions)
//Add your code for this event here:
Please help, I really want to add this function to a lot of images.

Thank you kindly

I forgot to mention when I preview it I get Javascriptvoid() showing in the bottom left of my screen.

Use the code below:

$w.onReady( function () {

$w("#image83").onMouseIn((event, $w) => { 

$w(“#image83”).onMouseOut((event, $w) => {


1 Like

@mikemoynihan99 Much thanks, that works!

I also encourage you to replace generic names like “image83” and “box30” with more mnemonic names; that will make your code easier to read/understand and maintain.