Hide and show issues

Discussion Ask a question
,
1

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
Michael

2

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

3

Use the code below:

$w.onReady( function () {

$w("#image83").onMouseIn((event, $w) => { 
    $w("#box30").show(); 
})

$w(“#image83”).onMouseOut((event, $w) => {
$w(“#box30”).hide();
})

})

1 Like
4

@mikemoynihan99 Much thanks, that works!

5

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.