Clickable area link

Twine Version: 2.3.12
Story Format: SugarCube 2.34.1
Hello again! I have a part in my game where the player must pick an item on a desk, and I knew I would need an imagemap to do this. The issue is, all the images in my game are actually background images held in my stylesheet, which designates tags to passages that need the specific background images (note: that is not an issue for me at this moment.) I looked at the SugarCube docs and found what appears to be an area shape where you can put a link within coordinates, like an image map, however it doesn’t seem to be working for me. Here is the code in the passage I’m trying to implement this into:

<area shape="polygon" coords="788,329 860,302 942,309 1003,340 1061,394 1089,450 1099,517 1080,588 1044,639 1038,562 998,560 1015,520 1015,474 994,428 938,389 876,388 812,420 775,491 792,557 698,559 689,487 707,409" data-passage="placeholder">

When I put my mouse around the coordinates, there are no clickable areas, nor are there anywhere on the page. Basically, what I’m asking is if it’s possible to create an imageless image map? Like, just a map, with coordinated areas that bring you to specific passages? Thank you!

Unfortunately, you cannot have an image-less image map or use a background directly with an image map.

There are various workarounds that you could try, but they all require you to place an element over the background—either the whole thing or just the portion you need interactable. Depending on where your background is attached and how, that could be anything from relatively simple to almost impossible.

We really need more information. Specifically, please show the style rules for your background(s).

Of course! Here is a portion of my stylesheet that is controlling the passage I need a ‘faux’ imagemap in.
(note: my files are held in a friend’s DnD website, hence the silly name)

body[data-tags~="eyes"] { background-image: url("https://gaypeoplechat.weebly.com/uploads/1/3/5/4/135471765/eye_color.jpg_medium"); background-size: width="1040" height="760"; background-color: pink; background-position: center top 60px;}
body[data-tags~="eyes"] .passage {padding: 0px; }

I could also provide a neocities link to the game-in-progress if needed.
Thank you for your time!