i used to have fun doing redesigns of my art website, pondering doing that again. only this time, it’s not trying to get me work, so it can be the sort of memory palace funplex of my auldest ambitions. i can’t program my way out of a wet paper bag, leaning heavily on the one or two things i need to achieve my vision. back in the day, that was creating a website out of tables and columns with fixed widths, filled with bespoke graphics, to make a very visually oriented interface.
i still want to do a visually oriented interface, where the page appears as an image, on which you can click the little parts to go different places, to explore. like in sandra bullock’s The Net, where if you click on the hidden π, it plunges you into a world of danger and thrizzles. flash shit. anyway, flash is no longer an option, but i’m given to understand you can do a lot of the same things with html5.
the cheap tricks i’d need to learn:
- how to do even one thing in html5 at all, haha. css and java if absolutely necessary.
- how to make an image scale to the window, so that on phone it’ll fill the screen and on desktop it’ll be the same proportions with some color field or tiling background to the left and right.
- how to make different regions of the image clickable as links, without having the region selection get borked by scaling the image to different resolutions.
- having an alternate graphic show on mouse-over would be nice.
if i could do those things, i’d probably be gravy. also gotta buy a new domain name, i think. the old one doesn’t fit anymore. how can i learn enough to do those things, without really trying?
–
HTML5 and CSS can do quite a lot. I guess you already know https://www.w3schools.com/html/
To make stuff scale is called responsive web design.
I’ve adapted templates from this site with good results. Took some fiddling (as templates do) but they worked out well. Fully device responsive and they look nice.
Good old-fashioned table-of-chopped-up-image-bits might work for this, and has the added virtue of being simple and backward compatible a good long way. In particular, it will even work without Javashit. In this, you’d slice up the image along a set of vertical and horizontal lines such that each of your intended click regions was bordered by some of those lines (and the original image borders). Then make a table with zero-width borders between cells, cells that stretch or contract to fit their contents, and their contents being the image fragments, made into links to the appropriate pages. To get scaling probably needs CSS to multiply (or divide) the image fragment width and height attributes by a screen-size-derived value. If the fragments are all scaled uniformly, the table and thus the assembled image will scale likewise, and if the fragments are hyperlinks, their selection regions will not be borked by the scaling.
That said, I don’t know how to use CSS to trigger the scaling bit, and I’m not 100% sure that specific thing can be done without a bit of JS being needed somewhere.
Graceful degradation in case of images missing can be achieved in the above by either giving every image fragment appropriate alt text (then it becomes a bunch of text links to pages in that scenario), or putting a text menu below that can serve as an alternative. CSS can position elements over other elements, so the menu can be covered by an opaque image so it will only show when images are disabled or failing to load. Or put on a separate page with just one textual link to that page. Maybe a little row at the bottom of “contents … about … privacy policy” or some such, with “contents” going to the text version of the main site menu, and the graphical version on the front page above the little row.
i’d heard about using templates. thanks for the links!
beks – my current and all previous versions of my website have done the slice and dice, which for me was very dependent on fixed width, and not able to scale. i wouldn’t mind working with what i already know, but got at least one problem to understand in order to make that work.
having an alternate text-only version of the site is an amusing concept, tho as a visual artist, i’ve never considered it before. bonus of having the option is accessibility. hm…
i checked to see if you could make an image not get distorted or truncated while scaling and the word is “use max-width=100%,” but when i, for purposes of doing the sliced-and-diced image of yore, asked if you could use max-width for cells in a table, I got “According to the definition of max-width in the CSS 2.1 spec, “the effect of ‘min-width’ and ‘max-width’ on tables, inline tables, table cells, table columns, and column groups is undefined.” So you cannot directly set max-width on a td element.”
now i’m thinking, image as background to a table that has scaling width, make cells x% of the height and width corresponding to parts of the image… i dunno.
Having never coded a webpage before (I did program in Fortran, COBOL, C, and C++ several decades ago), if I were considering something like this, I would start by searching for a few existing websites that do what you describe. Then I’d open ‘developer tools’, or equivalent for your browser, to see the code for each one. With luck, finding the similar core technique in each, leads to a workable solution for you.
ahh, jackin’ for beats, as they say. i’d love to, if i could imagine what site might do this…