Скачать или смотреть Clickable Interactive map tutorial - building & designing for BEGINNERS - HTML, CSS, JS

My website is https://www.semiology.studio

Having an interactive map on your website is a fun way to engage your users and add interactivity to your page. This is a simple tutorial on how to design and build an interactive clickable map with some toggle text. I explain how I research code snippets and apply them to my work. I used basic JS, CSS, and HTML. When you click on the markers the text will pop up.

🦄 You can get your design guide here: https://www.semiology.studio/design-g...

STEPS:
Preparing the assets
1. source a map from the internet or create your own;
2. Trace it. Tick ‘ignore white’ ;
3. Export at as SVG;
4. Copy the code.

Setting up (HTML) - 1:51 min
5. Paste your SVG code in the HTML field;
6. Find your markers. If they are circles, they’ll be marked as ‘circle’ automatically. Give each of them a name/class (i.e. marker-Russia);
7. Add other content like text that you want to appear (or it can be an image or whatever);

Styling (CSS) - 5:47 min
8. I went ahead and added some background and styled the text a bit. Usually, try to do it at the end.
9. IMPORTANT I added position:absolute; to all our text blocks. This allows you to play with positioning;
10. So, I added ‘top’ and ‘left’ properties to position our text boxes in the right places next to the appropriate marker;

JS - 8:42 min
11. Looked up for the JS code snippet. It’s easier to find it online and steal instead of writing from the scratch. Firstly, you’ll learn more tricks browsing, secondly, will avoid typos;
12. Copy and paste the found code, change the classes, so it’ll link the action (i.e. toggle) with the right element (i.e. .russia-txt);
13. Repeat for all the markers;
14. Add ‘hide’ command to hide the elements that are not supposed to be visible till you click the marker;
15. Add the same ‘hide command’ line after each ‘click command’ so every time you click a new marker all hide elements will hide back;

CSS (proper) - 15:36 min
16. Go wild! Play around with fonts, colors and backgrounds. I added some border, padding to give our text elements some room to breathe, changed font sizes.

You are done! Easyyyy

If you have any questions comment below, I’ll be happy to help 🥰

RESOURCES:
You can take the code from here:
https://codepen.io/ArtofSemiology/pen...

For more of my design work check my Dribbble account:
https://dribbble.com/Semiology

Let's connect! My Instagram:
  / antonovanastia  

Resources I used:
https://www.w3schools.com/jquery/eff_...
https://codepen.io/

When working on a project, make sure you use icons/images/etc suitable for commercial use.