'Javascript onmouseover image map to show another image map?

Is it possible to have an image map within an image map? For example, I have an image map of a tree diagram that expands when I hover over the lower-level nodes. I want to be able to click on the NEW lower-level nodes that pop up after hovering over the previous lower-level nodes. This would require creating an image map for the new image. However, I'm not sure how to do this; and could use some direction!

Please refer to my code (as of now, I can only execute the first image map). How could I add a new image map after hovering over the current image map?

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Grocery Store</title>
</head>
<body>

<h1>Online Grocery Store</h1>
 
 <img id="categories" src="img/shopCategories.png" usemap="#categories" alt=""> 

<!-- CATEGORIES MAP -->
 <map  name="categories"> 
       <area  shape="rect" coords="234,372,139,329"
       onmouseover="showFreshFood()">
 
       <area  shape="rect" coords="120,372,25,329"
       onmouseover="showFrozenFood()">

       <area shape="rect" coords="346,372,251,329"
       onmouseover="showBeverages()">

       <area  shape="rect" coords="459,372,364,329"
       onmouseover="showHomeHealth()">

       <area  shape="rect" coords="574,372,479,329"
       onmouseover="showPetFood()">
 </map> 

      <script>

        function showFreshFood(){
            document.getElementById("categories").src="img/Fresh Food.png";
        }

        function showBeverages(){
           document.getElementById("categories").src="img/Beverages.png";
        }

        function showPetFood(){
           document.getElementById("categories").src="img/Pet Food.png";
        }

        function showHomeHealth(){
           document.getElementById("categories").src="img/Home Health.png";
        }

        function showFrozenFood(){
           document.getElementById("categories").src="img/Frozen Food.png";
        }
        </script>
</body>
</html>
javascripthtmlimagemap


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions