How to change the color of a vector when passing the mouse over?
I have a menu made with vectors and when I pass the mouse over I would like them to change their color. I am using the following code:
export function vectorImage97_mouseIn (event) {
$w(“#vectorImage1”).style.color = “#FFFFFF”;
}
Obviously it does not work with vectors, only with buttons. Can someone help me to modify it to works with vector images, please?
Thanks!
Try duplicating the vector image and customising it as you want, see ‘Customizing the design of your vector art’ here: https://support.wix.com/en/article/about-vector-art
Simply have the original vector image shown on page with the altered version hidden. Then when you use the mouseIn and mouseOut commands, have the altered vector image set to be shown and hidden again.
Although this won’t work on mobile versions of your website as you can’t use mouseIn on them.
Thanks. But duplicating the vectors will make my page become even slower. It’s an option that I considered but I eliminated it because the site becomes ironically heavy.
The problem with duplicating the vector image is that it is a clunky workaround and can cause all sorts of unwanted problems. For example, I have a vector image that has a “puff-in” animation that pretty much fills the screen as it flies in…The mouseIn area follows the vector size during animation, so this means that if the mouse pointer is in that area (which is pretty much anywhere on the screen for the start of a puff-in) then the animation gets cut off and replaced with the hidden version - not good at all.
At the end of the day SVG files are only html code, so it really shouldn’t be difficult to just change the color on mouseIn? All you need to be able to do is add style=“fill:#FFEEDD;” to the and that would do it… Can this be done or something similar?
To reply to my own comment, it seems the easiest way to do this is to change the source file, as follows:
export function vectorImage_mouseIn(event) {
$w(‘#vectorImage’).src = ‘wix:vector://v1/49cc05_76eca07622ae410396446c95380e1.svg/vectorImageHighlighted.svg’
}
export function vectorImage_mouseOut(event) {
$w(‘#vectorImage’).src = ‘wix:vector://v1/49cc05_a0539dc24b924daabf7385a1f08ee.svg/vectorImage.svg’
}
However, I noticed that the first time you do a mouse over, there is a long delay (presumably whilst the hover over image is loaded for the first time)…my solution to this (which works) is simply to put the vector image somewhere on the page, but change it’s properties to collapsed on load (and never to be shown or expanded, but forces the image to be loaded prior to mouse over) and voila!
Much better solution, faster page, and works on animations as it should
Hi, did you ever find another solution?
It really should just be the fill option.
Daniel solution is the best for now (and still bad).
All vectors should be manipulated by code
@fialda I’ve used my code above (for swapping the source files) extensively since writing the comment, and it works well. Example page here - https://www.aquacruise.com/yacht-charter/KHALILAH or https://www.aquacruise.com/mediterranean the double-down-arrow animation is a src file swap on mouseover, as is the logo in the top left corner.
Just remember to have a hidden or collapsed element somewhere on the page that contains the mouseover src. This element will NEVER be shown / expanded, but it seems to force the page to preload the src file in case it is shown…If you don’t do this then the very first time you hover over the target vector then there is a perceivable delay (aprox 0.5s-1s) whilst it fetches the file (but no delay if you have a hidden copy). Hope that makes sense.
@aquacruise Thank you! It is a shame to have to use this workaround.
Your solution works, but notice the difference in the change on your logo and the gradual change on your top right menu.
I wanted to influence the size as well and without the transition, it just does not look right.
Thank you for your help anyways!
@maaarcelox3 Agreed, and since SVG is just code it should be a very easy implementation. I am guessing and have little expertise - but I suspect they may have concerns over exposing security vulnerabilities with SVG manipulation.
@aquacruise Did you upload your own .svg files for the normal and highlighted images? I am trying to do the same with with the normal triangle vector but the location doesnt change if I change it’s colour (ofc)
yes exactly, my own custom svg files
Old post with good working solution given, being closed.