Adding a map area to a MemorySteam Image in ASP.NET Core 7

Question

Using Visual Studio 2022 - I have the following view:

<img src='@Url.Action("GenerateImage","Position", new imageID = (int)TempData.Peek("image")})' alt="A Landscape Image" style="width:95%;height=75%" usemap"#TestMap" />
<map name="TestMap">
    <area shape="rect" coords="100,100,1000,1000" style="cursor: pointer" alt="A Closeup Image" target="_blank" href='@Url.Action("ZoomIn", "Position")' />
</map>

In the position controller, GenerateImage(int imageID) pulls a generic jpg, adds some images on top of it, then writes it out to the memory stream:

using (var memStream = new MemoryStream())
{
    OverviewMap.Save(memStream, ImageFormat.Jpeg);
    result = this.File(memStream.GetBuffer(), "image/jpeg");  
}

return result;

However, the displayed image has no active map area. I assume it's because the image came from the memory stream rather than a physical image.

What I am trying to do is to make the images I added on top of the base image clickable that will open to a new tab so that I can provide more in depth information.

My first thought was to use an image map on the loaded image. I've also thought about adding a transparent image on top of the first image with the mapping to the transparent image, or just adding a mouse click event.

I'm sure there are ways to do all of the above. My preference would probably be using a mouse event if possible, as I can make use of it later in the project.

Answer 1

Given that

the displayed image has no active map area.

You're providing a source image and it is displaying. The scope of this issue with image map not existing -- nor being eventful -- lyes in the html control markup.

In the markup snippet you provided, usemap"#TestMap" is not valid -- and it may not be interpreted (nor corrected) by the user-agent/browser.

Try doing, usemap="#TestMap"