Interactive Image Map for Elementor
Вставка
- Опубліковано 13 вер 2024
- In this video i am going to show the process of making an interactive image map for Elementor using Illustrator and Unlimited Elements. Each part of the map will be interactive and when you hover over it will change its background color and link to diffrent parts of the website.
Tools:
elementor.com
www.adobe.com/...
unlimited-eleme...
9 hours for creating the map with no results. And now, thanks to you, I did it in 10 minutes. Great video man, thank you so much!
This video has been a staple for me for some time now and I am very thankful you posted this but I am now noticing after an update with DreamWeaver that particular program is adding a ton of lines of code where the tag should be. I found a workaround and prior to saving the SVP in Illustrator, there is a button that says "SVG Code" that shows it in it's proper form. Hope this helps someone. Cheers!
Thank you so much for this video! Searching for something like this for years :D
Dropping by to pay my homage to the Canary Islands. Peeeeaaaace out!
Hi, thanks for this material. I HAVE A PROBLEM. I did everything as in the video, when I move to the map and click on the area, nothing happens, it doesn't open the link for me. Can you help?
This is exactly what I was looking for man! Thank you so much!
Fantastic job, thank you for sharing this!
Considering I do not have Elementor Pro, how would you go about making the links open images in a light box?
Thank you for the video!
Hello, on my image map (svg) are more than 30 media links. When I click on the link (uploaded .jpg file) it shows the image (same tab). But i want the media file to open in a lightbox. How can i change it, that the .jpg files open in a lightbox? the settings on elementor are correct. Any idea?
Great stuff
Does it works if I have an image, not only vector? cause I couldnt find de CSS to edit the hover on DW.
Hello, thank you for this tutorial. Now have a question, how do I turn on two forms at the same time? Thanks for your help
you just got new subs! thanks for this!
Great Great Stuff!!! I've been waiting for this tutorial for a long time!! Thanks! Thanks! You save my life! I've got a question. I've got a USA MAP with all states. I would like to add some information details each time I click on a specific state and show them on an adjacent box next to the map...How could I do it? Should I need to use Javascript? or wtihs this ELEMENTOR Element I can get it? I would be very grateful if you could give me some advice about this matter. Thanks a lot! Greetings from Spain.
Hi Maria, have you find a solution ?
Hello, did you get a solution to your problem?
well done. God Bless.
You are showing stuff in Dreamweaver and you did not say we needed dreamweaver, can you show where or how we change the hover and stroke in some place else? I mean I know we can put a hover in wordpress/elementor but thats for the entire image, so I'm a lil confused.
Wow col 👍
Can I add more than one link in the map with this method？
hello , please can you tell me how to apply it on a slider ?
How can I add tooltip with this map?
thank you for the great tutorial, but I have a question.
once I click the map borders (the link) it opens an Image preview any Idea how I can fix that?
in elementor u have a setting for opening image in lightbox - you need to turn that off
@@UnlimitedElementsThank you, but where can I find that?
You need to have Unlimited Elementro Pro do to this?
Carmen Maldonado no
@@UnlimitedElements When I add the Map to the Widgets and then search it in Elementor menu It does not appear and I follow the same steps as the video
When I click on the link it shows a lightbox and it doesn't go to the address from the link. The browser svg file works fine. Any idea?
yes in elementor you can decide to show al images in lightbox its in the page settings. you need to turn it off
@@UnlimitedElements Thanks, mate. AI is the best solution for me when it comes to image map. Thanks a lot.
@@marcinkawczynski3462 Hi, where i can find that settings ?
@@muzakifuz Open elementor. In top left corner you have hamburger menu and then global settings and tab lightbox and turn off "lightbox image"
@Unlimited Elements @
Marcin Kawczyński
Thanks for your responses, they helped me get Image Maps working
I need a tutorial on how to use slider free!
Hi! Can the link open a popup?
Valeria Carnemolla we have a link field that behaves same as elementor link field which can toggle a popup
@@UnlimitedElements Hi, everything works perfectly for me, but when trying to use the 'dynamic tags' in the map widget to "open popup" it does not work. But the same function works when using a button with other Elementor widgets. Any idea what I might be doing wrong?
@@Daniel-cr9vo change xlink:href = href .
Any idea how I can get each link to open in a new tab?
target="_blank"