Is there a way to read what image map an image is using for an if statement in javascript?

Authoring Twine
,
1

Twine Version: 2.3.16
Story Format: Sugarcube 2.36.1

So I’m using image maps to make a fake phone for a project I’m working on. I have it setup through javascript that when an area is clicked in an imagemap, it loads a different image map. So the homescreen has an image map on the apps, and then when you open the gallery, it has another image map on the pictures so they can be selected.

However, I’ve run into an issue where I need to know which image map is being used in an if statement, so I can have the selected picture on the homescreen. Is there a way to read which image map an image is currently using?

Here’s my code in case it’s needed

if (!window.PC){
  window.PC = {};
}
PC.changeImage = function (newMap) {
    var image = document.getElementById('myImg');
    if (newMap !== undefined) {
				image.useMap = '#' + newMap;
    }
		if (image.src.match("images/Phone/Gallery/0.png")) {
				variables().pbg = '0';
		}
		else if (image.src.match("images/Phone/Gallery/1.png")) {
				variables().pbg = '1';
		}
		if (variables().pbg = '0' && image.map = 'Homescreen') {
				image.src = "images/Phone/Homescreens/0.png"
		}
		else if (variables().pbg = '1' && image.map = 'Homescreen') {
				image.src = "images/Phone/Homescreens/1.png"
		}
};

I tried image.map, but that didn’t work, as well as image.usemap, but I suppose that one is just for changing what image map is being used. Is there a way to do it?

2

Already answered this question for you on the Twine Games discord. I’ll repeat my reply here:

You have two problems there:

1. You misspelled useMap in your discord example—note the capitalization—and used map here.

HTML, and CSS, have two sides, a language/markup side—what you write; e.g., <img usemap>—and a DOM API side—what you interface with in JavaScript; e.g., image.useMap. Sometimes the two side match exactly and sometimes not.

2. You’re attempting to use the assignment operator to check for equality when you need one of the equality operators—i.e., = vs. == or ===. You actually have that problem in several of your conditionals.

TL;DR: Try something like the following:

else if (variables().pbg === '1' && image.useMap === '#Homescreen') {