I have a very odd problem, an imagemap I made is working correctly when put in regular story passages, but doesn’t 100% work when put in a special sidebar passage StorySubtitle. The only thing that doesn’t seem to be working is it won’t highlight when hovered over. The link part of it works.
Greyelf would you have any idea on what might be preventing it from highlighting? Thx
<img src="misc/hotelfastmap1stfloora.png" usemap="#image-map">\
<map name="image-map">\
<area alt="Main lobby" title="Main lobby" coords="82,33,123,118" shape="rect" data-passage="Clearview main lobby">\
<area alt="West lobby" title="West lobby" coords="4,33,73,74" shape="rect" data-passage="West lobby">\
<area alt="East corridor" title="East corridor" coords="129,87,194,99" shape="rect" data-passage="ground floor east corridor">\
</map>\
Twine Version: 2.3.14
Story Format: Sugarcube
What CSS are you using to achieve the hover based highlighting?
jeb019
May 26, 2022, 10:33pm
3
I didn’t have to use any when putting it in a normal passage, it was automatically doing it with imagemap.
I am using the Jquery plugin of maphilight I found here to accomplish highlighting.
# Clickable Images with HTML Maps
This demo shows how to use the HTML map tag to define clickable regions of an image inside of a twine. It also shows how to use the jquery.maphilight library to give the player visual feedback when they hover over areas of the image.
See the [live demos](//mikewesthad.com/twine-resources/demos/html-maps/example.html) in example.html. You can import example.html into Twine and open it up. The demos are heavily commented.
![Demo](map.gif)
## HTML Maps and Areas
The HTML map tag allows you to define clickable regions within an image. While not often used in web developement, it is a lovely tool for creating Twines with visual navigation.
For a description and demo of the underlying HTML tag, see this w3schools [reference](http://www.w3schools.com/tags/tag_map.asp).
## Creating the Map
Creating an HTML map by hand is tedious. Instead you'll want to use an online tool for generating HTML maps. I recommend [image-map.net](https://www.image-map.net/).
1. Upload your desired image.
2. Define your areas. I recommend using polygons. Leave the link and target fields blank.
This file has been truncated. show original
The jquery code is beyond my understanding, but something in it must be limiting it to apply the highlighting to just imagemaps in twine passages and not any imagemaps in the UI bar. I know this is a tough one.
What “highlight” activation code are you using in your project, and where in you project are you executing it?
eg. the code that looks something like…
<<script>>
$("img[usemap]").maphilight({
/* configuration setting go here... */
});
<</script>>
And are you using a macro like <<done>>
to delay the execution of that activation code?