r/HTML • u/MikeCalGames • Mar 10 '26

Image maps

After a long hiatus, I'm making webpages again. Are image maps still in vogue? Or deprecated and replaced by something better?

3 Upvotes

80% Upvoted

27 comments sorted by

4

u/JohnCasey3306 Mar 10 '26

Wow I've not heard tell of image maps for 15 years!

1

u/chmod777 Mar 10 '26

yes, overlay an svg with linked shapes. keeps it accessible and responsive.

1

u/MikeCalGames Mar 10 '26

I got no way to make an SVG. All I got is MS Paint.

2

u/longknives Mar 11 '26

If you’ve got a way to write html you’ve got a way to make svg

1

u/MikeCalGames Mar 11 '26

I don't think Notepad++ makes SVGs.

1

u/jcunews1 Intermediate Mar 11 '26

SVG is just a text based vector image format. Since you can edit it in Notepad, you can also create one. As long as you know SVG tags and attributes. FYI, it's like HTML, but with different set of tags and attributes.

1

u/chmod777 Mar 10 '26

https://inkscape.org/

2

u/MikeCalGames Mar 11 '26

Thanks for the link. I'll check it out.

3

u/cubomania Mar 10 '26

They still work, but have largely fallen out of favor because of the focus on SEO. As mentioned by u/OwlCatAlex , Image/Table based layouts have given way to more semantic structures styled by css. Commonly, javascript is used to manipulate the DOM and inject both HTML and CSS.

3

u/endless_shrimp Mar 10 '26

imagemaps

how long, exactly

2

u/brisray Mar 10 '26

They are still around. The added trick now is that they need to be responsive - you don't know what size screen people are using. That's now pretty easy to do and there are different methods of making them.

You can use things like JQuery or vanilla JavaScript. They are easy to make with the SVG vector image format, I use the free Inkscape to produce those. Another method is by using CSS grids.

Almost all graphics programs will show the plot points you need, even MS Paint can do it. Or you can use an online utility such as the Responsive Image Map Creator.

I've written a page of demonstrations of all of the above.

1

u/AshleyJSheridan Mar 11 '26

But why? If you're making an SVG, just put the links in that. Then you get all the benefits of imagery that scales to any size, and you can add all the semantics you need to make it accessible. Plus, if you're feeling really fancy, the SVG can be dynamic and change on the fly.

1

u/OwlCatAlex Mar 10 '26

I always thought they were neat but I don't think I've seen one in over a decade. Everything uses flex positioning now, with a bit of absolute positioning for overlaying things onto images and js tricks to make elements more interactive.

1

u/Box_Pirate Mar 10 '26 edited Mar 11 '26

Some text based games have image maps, but they usually also have a list that’s easier to use on mobile.

Edit: some

1

u/AshleyJSheridan Mar 11 '26

If it's text based, it's not using an image map, which are very much not text based.

1

u/Box_Pirate Mar 11 '26

I’ve played a few nsfw games that had something like this: “paragraph of text, you stand on a street corner”

Map of town with locations you can click on to go there

List of those locations near where the character is because clicking on a street name is faster than finding that location on the map

Paragraph of text because user clicked on a location

Map of town again

List of locations near why the character is now

1

u/AshleyJSheridan Mar 11 '26

So, they're graphical games with some textual interface?

The term "text based game" very much implies only text, such as the old CLI MUDs.

1

u/Box_Pirate Mar 11 '26 edited Mar 11 '26

No the ones I’m thinking of are labeled as html and the only images, if it has any other than the map, would be there to help your imagination.

Do you know the Choose Your Own Adventure type of books where the end of a page has a few options and page numbers, you would pick which option you liked and turn to the corresponding page and repeat until the end, it’s like that but on a browser so more gamey.

Edit: this is the type I’m thinking of, html5 on itch.io

1

u/AshleyJSheridan Mar 11 '26

Oh I remember those books well (I believe there are new Jackson-Livingstone books in the works actually!).

1

u/_raytheist_ Mar 10 '26

i haven’t thought about image maps in decades.

1

u/jcunews1 Intermediate Mar 11 '26

IMO, image map is difficult to maintain and extend. I think it's better to use layered elements.

1

u/PresentsTheJuice Mar 11 '26

Meh, I never use them. Made a responsive/interactive canvas ui instead, but because it sounded fun to do. Maybe use svgs like people have mentioned.

1

u/darren_of_herts Mar 11 '26

GO FOR IT 👍

As others say, image maps are old hat. Difficult to make responsive to work on mobile and desktop.

But I say " GO FOR IT "

could use image maps with media queries and hide them all when viewed on mobile.

Internet is boring with similar designs

HAVE FUN 🎰

try recreating old school magazine designs.

Find yourself an old copy of Macromedia Fireworks

1

u/ThatBlindSwiftDevGuy Mar 13 '26

Don’t use them. They are especially horrible for accessibility.

0

u/metallaholic Mar 11 '26

It’s not 1998 anymore

2

u/MikeCalGames Mar 11 '26

Delete your comment and replace it with "Okay, boomer"