On click event on a hover box

Ask the community
,
1

I want a simple portfolio website where you can see a description of each project appearing on hover the image. But I want to be able to click on that photo, linked to an other page. How can I do?

2

Hello

click on the image’s settings, add the link you want the image to link to, and write down the description you want in the tool tip section.

329×605 29.9 KB

Massa

3

Hi Massa,

In fact, this is not just a simple image, I want to put a link on a hover box, witch doesn’t have the setting option.

Thank you

4

Hello

you can do that using code for sure!

-to show description on hover :

  • add a text box to show the description text in

  • make it hidden on load

  • add on mouse in event and show the text box in it

  • add om mouse out event and hide the text box in it.

export function image1_mouseIn(event, $w) {
 //Add your code for this event here: 
    $w('#text1').show()
}

export function image1_mouseOut(event, $w) {
 //Add your code for this event here: 
    $w('#text1').hide()
}

-to link the photo to a different page on click:

  • add on click event

  • use wixLocation.to() to redirect the user to the other page.

 
export function image1_click(event, $w) {
 //Add your code for this event here:
    wixLocation.to(url); // add the page url here

}

*you can add the events in the properties panel :

*here’s some useful links to help you:
-Wix Code | How to Add Custom Interactions with JavaScript - YouTube
-wix-location-frontend - Velo API Reference - Wix.com

I hope this helps!
Massa

5

I have somewhat a similar question. I created an interactive roadmap infographic where you hover over a sign on the road and a text box appears. I have my mouseIn and MouseOut settings set for show and hide so when you hover over another sign the text box changes, however, I want to be able to click links within the “appeared” text box. With how I have it set now as soon as you move away from the sign the box disappears. I understand if I turn off the Hide function the box will stay, but it gets messy. Should I be using the onClick method instead? I love what I have, but just need more functionality. Any help is appreciated. Thanks!