[Solved] How to make hovering over polygonal areas cause changes in another div

[Marjo]

Hi everyone!

I’m trying to code some sort of map + legenda. The idea is that when you hover over the name of an area in the legenda, the corresponding area on the map lights up, and vice versa. I’d also like to make it so that clicking on either will take you to a different page (or a bookmark on the same page, haven’t decided yet) with extra info on that area, although I haven’t tried coding that yet.

This is what I have so far.

This topic already helped me a lot, but my problem is that some areas are very irregular in shape and therefore hard to define with rectangles. Since some of these irregular shaped areas are right next to each other, using rectangles would mean the hovering would be very inaccurate in some spots (hope that made some kind of sense). Ideally, I’d like to use polygons instead of rectangles to define areas.

I tried applying the coords attribute for polygons, but didn’t get really far (the code got really messy really fast, too).

The website I need this for only allows the use of CSS and HTML, so I’m looking for a way to get this done without javascript. I still consider myself a beginner when it comes to coding, so if you see a way to make the coding I have so far more functional, please do tell me – I’m eager to learn.

Any help with this would be very much appreciated ^.^

[Paulie_D]

I’m on a mobile device right now but I’m assuming this is an image that has areas?

If so, you can use the map and area tags for that. It makes hotspots on images.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

[Marjo]

Thanks for your reply, Paulie!

As I’m still an absolute beginner, I’m afraid I can’t say 100% for sure whether this is an “image that has areas” or not. I think it might be easiest if you look at the code I have so far (because I’m horrible at explaining code and using the correct lingo), but essentially I put my map as the background and went from there.

I’ve looked into using map and area tags, but I could not seem to make those work with the whole hovering and highlighting I need.

It’s very likely that my main problem is my lack of experience, and that there’s a better and/or more simple way to tackle this problem.

[Paulie_D]

If you want polygonal areas then either map & area or you’d have to use SVG.

Other than that there is no simple way to tackle this and even if you have that set up I suspect, from a quick glance, that this is is a lot more complex that you realise.

Javascript is almost certainly going to be involved to get the functionality involved…or a whole mess of CSS…but that will depend on the eventual structure but since you want reciprocal highlighting…yep, JS…no real way around it.

[Marjo]

That’s a shame :/

Oh well, thanks for answering my questions! Now at least I know it simply can’t be done.

[Author]

Posts