Así que estoy usando mapas de imágenes para hacer un teléfono falso para un proyecto en el que estoy trabajando. Lo tengo configurado a través de javascript que cuando se hace clic en un área en un mapa de imagen, carga un mapa de imagen diferente. Entonces, la pantalla de inicio tiene un mapa de imágenes en las aplicaciones, y luego, cuando abre la galería, tiene otro mapa de imágenes en las imágenes para que puedan seleccionarse.
Sin embargo, me encontré con un problema en el que necesito saber qué mapa de imagen se está utilizando en una declaración if, para poder tener la imagen seleccionada en la pantalla de inicio. ¿Hay alguna manera de leer qué mapa de imagen está usando actualmente una imagen?
Aquí está mi código en caso de que sea necesario
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" } };Probé image.map, pero eso no funcionó, así como image.usemap, pero supongo que uno es solo para cambiar el mapa de imagen que se está utilizando. ¿Hay una manera de hacerlo?
Según la documentación de MDN en HTMLImageElement.useMap , la propiedad useMap se puede leer y escribir.
El motivo de la falla del script del OP es que el OP dentro de las cláusulas if no se compara con, por ejemplo, == / === pero sigue asignando valores a través de = .
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" />