I have been asked to create an interactive map which is similar to this https://www.drmprefab.com/case-studies.
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.
My approach will be using svg elements with some hover effects top display the information.
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
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.