Hi,
I have been asked to create an interactive map which is similar to this Case Studies World Map.
It would be great to get some advice on the best way to approach this. If a tutorial exists for something similar that would be a big help.
Thanks
Hi,
I have been asked to create an interactive map which is similar to this Case Studies World Map.
It would be great to get some advice on the best way to approach this. If a tutorial exists for something similar that would be a big help.
Thanks
Hey @sparky
My approach will be using svg elements with some hover effects top display the information.
Piter
I am also looking for the same thing. Did this ever get resolved?
I have tried using the SVG images layered on top of each other but it did not work?
You can do it with SVG or PNG - I think this should work pretty straight forward - I think this is a workaround without using sophisticated JS or SVG animation
Step 1 - create a map and cut it up into pieces that you need to change color on hover.
Step 2 - create a copy of it but with different colored countries,
Step 3 - position all the pieces from Step 1 in a div 1 how you like
Step 4 - copy div1 and rename it div2, and place it on top of div1, replace all the images with ones from Step 2
Step 5 - Animate each pieve with “on hover” animation …
Also, have a look at this CodePen - this can also work for you I think
Hello IVG,
How do you get the image to only be selectable on the country shape? When I paste my image into Webflow with a transparent background, there is still an invisible square background that is not neccesarily in my image shape that when hovered will still trigger the effect. I would like it so that it only occurs when the mouse is specifically hovering over the image!
Any help would be greatly appreciated.