Hi guys and girls, I’m trying to make an interactive map with Velo and boxes.
I don’t have much experience with Velo and coding in general just trying to learn it from forums and videos so I’m not sure what I’m doing. so maybe someone can help.
when the mouse hovers over Object Box appears and when the mouse is out of the object it hides the box.
the problem is when you hover the mouse over objects a little too fast it shows boxes but does not hide them when mouse out. see the video please:
the white boxes are from Wix it is Wix elements.
on the image, I have png files wich ar transparent and have this number son it.
here is my code for first box D30 every other box has same code
import wixWindow from ‘wix-window’ ;
$w . onReady ( function () {
//aniamtions
let fadeOptions = {
“duration” : 100 ,
“direction” : “center” ,
“intensity” : “soft” ,
};
///////////////////////////////////////////// 1 ხაზი
// 1 D30 …
//show hide box
$w ( ‘#d30’ ). onMouseIn ( async ( event ) => {
$w ( ‘#1b’ ). show ( “bounce” , fadeOptions );
});
$w ( ‘#d30’ ). onMouseOut ( async ( event ) => {
$w ( ‘#1b’ ). hide ( “bounce” , fadeOptions );
});
//o
$w ( ‘#d30o’ ). onMouseIn ( async ( event ) => {
$w ( ‘#1b’ ). show ( “bounce” , fadeOptions );
});
$w ( ‘#d30o’ ). onMouseOut ( async ( event ) => {
$w ( ‘#1b’ ). hide ( “bounce” , fadeOptions );
});
$w ( ‘#map’ ). onMouseIn ( async ( event ) => {
$w ( ‘#1b’ ). hide ( “bounce” , fadeOptions );
});
// ამ ნაწილში ნაკვეთის ნომრის წინ ჩაწერეთ “//” ფართის გაყიდვის შემთხვევაში. მაგალითად ასე $w(‘#//d30’). show hide orange box
// ფართის ისევ ხელმისაწვდომი სტატუსის დაბრუნებისთის ამოშალეთ სიმბოლო “//”. მაგალითად ასე $w(‘#d30’).
$w ( ‘#d30’ ). onClick ( async ( event ) => {
$w ( ‘#d30o’ ). show ();
wixWindow . openLightbox ( “d30” );
});
//…
/////////////////////
$w ( ‘#d30o’ ). onMouseOut ( async ( event ) => {
$w ( ‘#d30o’ ). hide ();
})
/////////////////////
here’s how it looks on the editor.
thank you for your time