The call to the map image is made within a passage, which has its own CSS code. The interactive map works very well, except that it doesn’t scale to narrower screens; in such cases (and especially when used on handheld devices) the application works, but is less visually attractive. It flows outside the bounds of the parent container. The working code looks like this:
Whenever I try to rewrite the code to allow it to resize, two issues crop up. The first is that anything I do to scale the width does nothing to the height; in every case the height of the container remains unchanged, the map scales properly, but the map duplicates itself vertically to fill the extra space in the unaltered container.
Second issue is that the listener is no longer responding to the correct points on the screen. The areas within the map are at the same location on the screen, and behave as if the image is still being displayed in its original dimensions.
Here is an example of code that produces these errors.
I believe resizing <map> areas requires javascript, unfortunately. It’s kind of an old HTML thing that got left behind in the CSS area, I think. Try https://github.com/davidjbradshaw/image-map-resizer, maybe?
According to developer.mozilla.org, the use of an image with a usemap attribute inside of an anchor element renders the image map non-working. If you need the entire image clickable the coordinates of 0,0-Width,Height can simulate a hyperlink. As mentioned, there are some very long standing stable open source JavaScript code, lookup David Bradshaw and the .min.js library on GitHub. I think you want to use imageMapResizer.min.js as a source code file.
Weirdly, the (a)nchor element worked for me. I think I may have introduced it some long time ago as a hack to prevent the image element from rescaling. It worked fine with Mikewesthad’s maphilight code. I can click on the hilighted regions of the map, and it takes me to the regions I want it to. It just won’t re-scale.
Seeing that the anchor element may be superfluous, and may be interfering with my ability to resize the image correctly, I have removed it.
However, there is maybe an even better option, which is to do your image maps with SVGs instead, which both resize smoothly, and allow more complex clickable areas as well. Cyrus wrote a guide for doing this here: Easy, Interactive, and Scalable Image Maps using SVGs · GitHub
TLDR:
If you just want to keep what you have, but add resizing, use the script from my blog post
If you want the same technique but with nicer macros, use Maliface’s version
These are some terrific resources you’ve posted, thanks. I’ve gotten the Resizer function to work (from your blog post). After rebuilding my project about fifty times, I realized I could switch my image src to a web-based image and run my tests in browser, without republishing every time. Well, I’ve got a little cleanup to do in my project folder now.
Also I’ve taken Candy64’s advice to remove all the containers from around my map image (both the anchor and the div), and just create a myimg class which I can style directly.
Unfortunately I’ve reached the conclusion that the hilighter code I am using (MikeWesthad) is absolutely not compatible with the resizer code. I’m at a point where the map resizes correctly, and responds to clicks in the right locations, but the highlight layer created by the hilighter code does not rescale, and I suspect the hilighter code is also responsible for the strange vertical tiling effects I’ve observed.
I think next I’m going to try Maliface’s code, which will be easier to test and troubleshoot now that I’m using web-based img file for testing instead of the folder based image I’ll use when I actually publish for release.
Edit to remarks below: OK, I might have gotten it working now. Reading documentation is hard.
David,
Can you provide references to games where the Maliface image-map-macro is in use? I’ve been struggling with it for a bit, on a fresh project so that none of my other code can interfere, and it feels kind of buggy to me. It throws frequent “uneven number of arguments errors” without obvious cause, and even when I can get it to run, it doesn’t interpret my coordinates in a rationale way.
defining area coordinates=“10,10,100,100” (which should correspond to (X1, Y1, X2, Y2) relative to the image)
the generated map seems to create a clickable area with dimensions “0, 0, 100, 10” relative to the image coordinates.
I’d love to say yes, but I don’t know if it has been used in any live projects. A lot of Maliface’s stuff has been released in response to someone else having an issue (in this case with using the same image resizer script you are trying to use), but that doesn’t mean they get used.
I’d double-down on the suggestion to try the SVG approach, I think it’s by far the best technique now.
Thanks for getting back. I got the Maliface image-map-macros working well enough to do what I need it to do for my own current project, but haven’t exactly fallen in love with it.
I’m learning something about svg file types as I’m designing a project for a laser engraving machine, so maybe I’ll try to apply that understanding to the next Twine project I pursue.
