Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

According to MDN's documentation on HTMLImageElement.useMap the useMap property is readable and writable.

The reason for the OP's script failure is that the OP within the if clauses does not compare with e.g. ==/=== but keeps assigning values via =.

console.log(
  document
    .querySelector('img[usemap]')
    .useMap
)
<map name="infographic">
    <area shape="rect" coords="184,6,253,27"
          href="https://mozilla.org"
          target="_blank" alt="Mozilla" />
    <area shape="circle" coords="130,136,60"
          href="https://developer.mozilla.org/"
          target="_blank" alt="MDN" />
    <area shape="poly" coords="130,6,253,96,223,106,130,39"
          href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
          target="_blank" alt="Graphics" />
    <area shape="poly" coords="253,96,207,241,189,217,223,103"
          href="https://developer.mozilla.org/docs/Web/HTML"
          target="_blank" alt="HTML" />
    <area shape="poly" coords="207,241,54,241,72,217,189,217"
          href="https://developer.mozilla.org/docs/Web/JavaScript"
          target="_blank" alt="JavaScript" />
    <area shape="poly" coords="54,241,6,97,36,107,72,217"
          href="https://developer.mozilla.org/docs/Web/API"
          target="_blank" alt="Web APIs" />
    <area shape="poly" coords="6,97,130,6,130,39,36,107"
          href="https://developer.mozilla.org/docs/Web/CSS"
          target="_blank" alt="CSS" />
</map>
<img usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info.png" alt="MDN infographic" />

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!