Hello people:) You will help me ? I have a block (4 columns block like photo i atteched)
|How to add link to each column on click and how to add hover effect (change color)
This has already been asked before if you search the forum.
https://www.wix.com/corvid/forum/community-discussion/linking-a-strip-column-to-external-url
To do the change colour on hover you will need to use the onMousein and onMouseOut event handler functions and simply have the elements in your column duplicated with the duplicated group for the hover setup being set to hidden on load.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut
https://www.wix.com/corvid/reference/$w.HiddenMixin.html
You are best to put eveything into a box container and make this container the same size of the column strip, that way you only have to set your code for the box container for the show and hide and the hidden on load in the properties panel for that box container element only too.
As all the elements inside the box container will be attached to it, they will all be copying the actions of the box container itself.
https://support.wix.com/en/article/attaching-elements-to-a-box
Plus, note that the link will have to go on the box container which is for the hovered view and not the original view. You can do this in your code too, however it is easier to just do it with the link in the editor itself.
So when you view the page normally the user will see the duplicate group #1 which is the existing setup in your picture.
Then when the user moves the mouse over the strips column, your onMouseIn code will run and the duplicate group #1 will be hidden and the duplicated group #2, which is the same duplicated elements albeit in your colour setup that you want on hover, is then shown instead.
Finally, when the user moves the mouse away from the strips column the onMouseOut code will run and the duplicated group #2 will be hidden and the original duplicated group #1 will be shown again.
You can see more about working with user activity here.
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events
https://support.wix.com/en/article/corvid-tutorial-adding-custom-interactivity-with-events
of first my question i did it, thank you
but this i dont understand , i am not good in code and may be you give me the example of forcking code structere and i put it in my site and add my colors
To do the change colour on hover you will need to use the onMousein and onMouseOut event handler functions and simply have the elements in your column duplicated with the duplicated group for the hover setup being set to hidden on load.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut
https://www.wix.com/corvid/reference/$w.HiddenMixin.html
Hi there! Here is a visual example of what was meant in the previous message.
- Here we have two elements (red and blue). Blue element is supposed to be shown on the page first. The red element should appear instead of the blue one when you hover over the column. That’s why the red element is set to be hidden on load:
2. Then, we need to create two functions for our strip column ( onMouseIn and onMouseOut ). In these functions we will hide and show the elements accordingly:
export function column1_mouseIn(event) {
$w("#vectorImage4").hide(); //hiding the blue element
$w("#vectorImage2").show(); //showing the red element that was hidden on load
}
export function column1_mouseOut(event) {
$w("#vectorImage2").hide(); //same logic, but the other way around
$w("#vectorImage4").show();
}
But if i want to chenge background color of #column1 on mouse in ? i dint want to create other figure and items into the column
In this case you can use the same functions (onMouseIn and onMouseOut) for the strip column and set the background to be an image from the Media Manager (you can’t set it to a different color with code, but you can have a background image that is just a solid color).
In this case the code would look something like this:
export function column1_mouseIn(event) {
$w("#column1").background.src = 'wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120';
}
you can retrieve a URL of an image by following these instructions
You can find more information about it here: https://www.wix.com/corvid/reference/$w.ColumnStrip.html#background
look, your thought is correct, but I figured out how to do it with a button at all, the button has a function to change color on hover and I wouldn’t need a corvid, but when I added a button and if I add a background photo as you wrote, then when changing the width of web site, blocks are moving out
look, your thought is correct, but I figured out how to do it with a button at all, the button has a function to change color on hover and I wouldn’t need a corvid, but when I added a button and if I add a background photo as you wrote, then when changing the width of web site, blocks are moving out
Is there a way to force the MouseIn to run only when the mouse is hovering over the vector art shape rather than its squared container area (blue lines)? I want a vector to disappear when hovered over the brown area only, however it is an irregular shape not filling the entire “squared box”, please see image
It would be perhaps more efficient to ask the same question, with the same Screenshot in an own issue-post.