Button with image

Ask the community
1

1016×828 121 KB

Hi, I would like that when I hover the mouse pointer over a word, an image would appear in the box on the left of my site, as seen in the example attached.
Is there any way to do it?
Thanks!

2

I’m certainly no expert in this field, but I know it can be done with velo.

You’d be using onMouseIn() over each word and (the quick and dirty way) hiding/unhiding an image. I guess if you wanted to do it properly, you could set up a gallery and call each image.

Details here!

Anywho, that’s something for the velo forum. Whether there’s a way to do it without script, I’m not sure.

3

Hi Andrea,

Check out this example: https://www.wix.com/velo/example/text-microinteractions

The examples shows a scenario a bit more complicated than you need (it also animates the image) but you can deduce your use case from it.

Good luck!

4

thank you! I try to do this but it doesn’t works…
I’ try different way for 3 days…but…no way

1510×1190 230 KB

1606×1172 102 KB

5

thank you! I try to do this but it doesn’t works… I’ try different way for 3 days…but…no way…

1510×1190 230 KB

1606×1172 102 KB

6

see $w syntax here: https://www.wix.com/velo/reference/$w/$w

if your element id is “photo” you should use $w(‘#photo’)…

7

Hallo Asaf,
I try as you told me, but…anyway, it doesn’t works…
I don’t know why? Its looks correct

1268×241 36.9 KB

8

$w . onReady ( function () {

// Declare all elements:
const age = $w ( ‘#age’ )
const cane = $w ( ‘#cane’ )

// Play ‘show images’ animation on hover and reverse on out:
age . onMouseIn (() => show . cane ())
age . onMouseOut (() => hide . cane ())
});

I TRY THIS ALTERNATIVE WAY, BUT STILL DOESN?T WORKS

9

Hi Andrea,

Use this code:

$w ( ‘#text1’ ). onMouseIn (() => {
$w ( ‘#image1’ ). show ();
})

Remember to hide the image by default so it appears only when hovering over the text.

Good luck!
Asaf

10

Thank you Asaf! You resolve all my problems!! thanks a lot!!!

11

Hi Asaf!
This is my website https://www.313-distribution.com
But there is a small problem:
when I hover the cursor over the words, nothing appears, but when I go back over the second time, then the photo appears.
Is there anything else I can do to ensure that the photos are loaded on the first mouse over?
Thanks!

12

Hi Andrea,

I see you don’t have a onReady function on your page. Please define the event handlers in the onReady function. Read more about it here: https://www.wix.com/velo/reference/$w/onready

Good luck!

13

Hi Asaf,
is this the code?
I try a lot of different solution, but doesn’t works…
Can you help me with an example, please?

// Code you want to run when the page loads
$w.onReady(function () {
console.log(`Device viewing site is: ${wixWindow.formFactor}`);