💾 Archived View for daintyeco.smol.pub › websiteoverhaul captured on 2023-04-19 at 22:29:01. Gemini links have been rewritten to link to archived content
-=-=-=-=-=-=-
⋆｡ﾟ☁︎｡⋆｡ ﾟ☾ ﾟ｡⋆
I am currently redoing one of my neocities websites. It was initially kept as some carrd-esque site, but I decided I want to do more with it and transfer some stuff from my other neocities there as well to make it a proper hub of my projects.
I have since created a pixel art background image for the site. It features a white center area where the main text is supposed to go, and there is a shelf and a desk to each side of it. Shelf (right) and desk (left) are both populated with items; think, a laptop, a sewing machine etc.
I want these to be clickable on the website and lead to respective sites, so that clicking the sewing machine leads to my sewing projects. A sitemap will be included.
I am now in the tough spot of having to decide how to implement that.
The go-to method for this stuff that I see around the web and especially neocities is usually to upload the background image without these items (so: only empty table, empty shelf), upload the items as separate image files, and then position them one by one onto this background image via HTML/CSS.
I could indeed do that - that was my initial plan, so all items are currently on their own layer and can easily be exported as their own thing separate of the background image file. But to be honest, it also seems like a lot of code and fiddling to get the correct position - we are talking about 15 items. And I am afraid that once it is on another screen, another browser, another resolution etc etc it's gonna mess up the positioning. No website looks the same on all devices and browsers anyway, but I really need the items to fit into the shelf reliably, and be positioned correctly on that table. Otherwise it won't look good. And I will admit: I am not that good in reliably positioning stuff. It takes me a lot of effort and I don't always understand why it suddenly works now.
So the other option is to create an imagemap. This is often used by museum websites displaying their building maps or geographic maps.
That way, I would export it as one image with all the items already included, upload it as the background image of the website, and just define clickable areas and which links they're supposed to lead to. There are helpful guides and websites for that, even ones that let you mark the areas on the image and then spit out the code so you don't have to manually trial and error the coordinates.
I've researched a lot and also had the pros/cons and other limitations (browser compatibility, HTML5 support etc) laid out by ChatGPT as a bonus (lol) but I am still unsure. I wonder if the imagemap really, in practice, reliably scales with the background image or if, on different browsers and desktop PCs, it won't align.
I also wonder if the center text will be unproblematic or if it could render the imagemap non-functioning. The text won't at all overlap with the clickable items, but still.
Honestly, if anyone reads this and has some good ideas and tips regarding this, feel free to reach out through daintyeco /at/ pm.me!
Edit: This is now done :) I went with the imagemap and apng!
𓇽 ° . ༻ 𓈒 ꒪ ๋ ° .𓏲⠀ ๋࣭ ♡ ͘ ࣭⠀⸰ ⋆ ֗ ִ ᨒ .⋆ﾟ. ͘ ࣭⠀⸰ ♡ 𓂂 ◌ 𓇽 ° . ๋ 𓂂 ⠀✼ 𓇽