[jQuery]

$(function () {
    $(". area");
    $(". fadein_img_wrapper img"). hide ();
    // Link button = i
    // image = k
    $(". area"). each (function (i) {
        console.log (($(this) + i));
        $(". fadein_img_wrapper img"). each (function (k) {
            console.log (($(this) + k));
            $(". area"). on ("click", function () {
                if (k == i) {
                    $(". fadein_img_wrapper img"). stop (). fadeToggle ();
                }
            });
        });
    });
});

[HTML]

<figure>

<map name = "ImageMap">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
</map>
            
                
                
                
            <!-/. fadein_img_wrapper->
</figure>

[CSS]

. factory_wrapper {
    position: relative;
}
.factory_wrapper figure {
    padding-top: 80px;
    text-align: center;
}
.factory_wrapper .fadein_img_wrapper img {
    position: absolute;
    top: 100px;
    left: 150px;
}

** ###

[I want to achieve]

When you click each link on the HTML image map, the image associated with it will fade in
I want to

[I'm having trouble]

Click the image map link to see the image itself.
However, since all image map links and images associated with each image map are acquired with each of jQuery,
If i click on any image map link, the previous element will be overwritten by the element that was looped later
The last acquired image will be displayed.