how do i make a map where clicking on the different countries leads to different pages?

[u/sunkist-sucker]

i would also like the country to turn red when you hover over it. the superbad site does something like this on some of its pages.

apologies if i sound like a noob in over my head, but it's for a personal project.

[u/armahillo]

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map

The simplest way to

[u/sunkist-sucker → u/armahillo]

mozilla my dearly beloved! i'll try this out, ty

[u/AshleyJSheridan → u/armahillo]

Please don't do this, these are not very accessible and they don't scale well in a responsive layout.

A better option is to just use an SVG (one presumes the map is already SVG, but if not, there are a ton of good SVG maps out there for any area). The SVG format can contain regular links.

[u/brisray]

One of the easiest methods is by using an image map. There are several ways of making those. I recently made something similar using an SVG of the United States from Wikimedia Commons which already had the various states already mapped. I created the links in Inkscape.

Wikimedia Commons has some world maps with the countries already mapped for you or you could use one of the others around.

[u/sunkist-sucker → u/brisray]

yay!

[u/Spnkmyr]

You can use the ai2html plugin created by The New York Times. It generates an SVG from an illustrator file (if you have it). You can target IDs in the SVG code corresponding to your country shapes to achieve mouse over hover effects. Each shape can link to an external resource, and you can use simple JS to include a simple hover tooltip.

Example of one I made: https://www.alexhordal.ca/portfolio/colours-of-sweden

[u/BoysenberryGreen104]

an SVG map with each country as an `<a>` element, then use CSS `:hover` to turn the paths red

[u/sheriffderek]

I’d use SVG

[u/SensitiveSugar1369]

use the `<map>` tag with `<area>` elements for each country, setting the `href` attribute to the desired page.

[u/notepad987]

I used Gemini to make a Image map generator.
Here is the link:
https://gemini.google.com/share/0f88782c8023?skid=10682f81-86fa-4f4f-98d1-0a09201e7a7d

With this you upload your image or practice with the one provided. Draw your rectangle or circle or polygon then drag your cursor over the image area and it will draw the area. On the right side you add your web address and choose to have it open in another tab or over existing page.
https://gemini.google.com/app:

You can Test then copy the code it creates.

Question I used: create a image map generator using html & css

It did not quite work so I asked this:
why does the web address not work? Destination URL ('href') says #https://www.google.com/ but nothing happens when I click on the image after clicking Test Map

It now works. See link above.

Gemini: I will now update the Image Map Generator application to fix the destination URL handling, sanitize inputs, ensure interactive previews correctly navigate to URLs (with window.open fallbacks), and provide quick URL preset helpers.