<!--
@BLINK-ALLOW:focus*
@AURALINUX-ALLOW:focus*
@WAIT-FOR:done
-->
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>After map1 is renamed map2, the third picture should have only the coffee mapped</p>
<img src="workplace.jpg" alt="Workplace pic 1" usemap="#map1" width="400" height="379">
<img src="workplace.jpg" alt="Workplace pic 2" usemap="#map1" width="400" height="379">
<img src="workplace.jpg" alt="Workplace pic 3" usemap="#map2" width="400" height="379">
<img src="workplace.jpg" alt="Workplace pic 4" usemap="#map2" width="400" height="379">
<map name="map1">
<area shape="circle" coords="337,300,44" alt="Coffee only (origin map1)" href="coffee.htm">
</map>
<map name="map2">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
<script>
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
// All maps get the same name, therfore the first image doesn't have a
// map anymore, and it becomes an image with no children.
// Only the third image will be an image map.
document.querySelector('map[name="map1"]').name = "map2";
document.title = 'done';
}, 250);
});
</script>
</body>
</html>
Codebase Browser
chromium