I’m trying to create a responsive image map for my game (rectangular hotspots that change size in proportion to the size of the image). I tried many different methods, like this and many different JavaScript and JQuery codes, but I couldn’t make it work. Can someone help me?
To start with, you need to set up event handlers for anything which could cause the image to resize. Something like this would go in your JavaScript section:
function resizeHandler (event) {
/* Code to scale image map goes here. */
}
$(window).on("resize", resizeHandler);
$("#ui-bar-toggle").on("click", resizeHandler);
That should trigger the resizeHandler() function for the two most likely reasons that the image would resize. You would put your code in that function which would update the image map if the image’s scale had changed.
Note: You may want to use some “debounce” code in that function to keep it from firing too often, since resizing a window triggers a large number of “resize” events.
If you have some simple sample code which demonstrates the problem, then it might be a bit easier to see exactly what you’re trying to do and suggest something more than that.
If I’m reading the instructions correctly, for SugarCube/Twine you could simply copy the above code to your JavaScript section, and then just add this:
$(document).on(":passagedisplay", function (event) {
$('map').imageMapResize();
});
That should work, though I didn’t look at the code enough to determine if calling it repeatedly would cause any problems. If you start to experience greater and greater slowdown every passage you go to, then the code may need to be modified to handle repeated calls. I wouldn’t worry about that too much unless you notice it happening, though.
Hello there, is there a way to implement this responsive map library to Harlowe (3.2.0)? Even if I already knew SugarCube (I don’t!) it would be a nightmare to translate everything that is already setup in Harlowe.
Thank you in advance
Sorry, I don’t know Harlowe, but hopefully someone else can help. I’d also recommend checking out the “Image mapping + Javascript” thread, which is more Harlowe oriented.