Need Help With Image Map With Popup Image Over "Hot Spot" Coordinates

**Deanna** · 05-28-2020, 10:12 PM

Hello everyone. First time poster, long-time fan as the saying goes. What seems like half a lifetime ago I used to know how to code HTML and CSS. I used many DD scripts in my web sites and came here often for help and inspiration. Then I stopped. Now I've started again and, man, has coding changed with the advent of HTML5 and CSS3. I need some help.

I have a large image map with many "hot spot" coordinates.

1. You mouse over the "hot spot" and a pop up image appears on the screen;
2. You move your mouse off of the "hot spot" and the image is gone from the screen.

So what I'm after is "on hover" not "on click."

Aside from keeping the popup image within the boundaries of the viewport and perhaps having a smooth fade in/fade out effect for the pop up image, that's all I'm after.

Here is an example of how I envision this:

http://theinspirationgallery.com/D2-...ap_example.png

All of the red boxes will become "hot spots."

Years ago I used to be able to do exactly what I just described using JavaScript but the code I used then is now outdated and doesn't work.

HTML Code:

<div align=center><img src="images/mysticzon.png" width=920 height=672 border=0 usemap="#mysticzon">
<map name="mysticzon"></div>

<area shape="rect" coords="480,118,550,248" href="javascript:void(null)" onfocus="if(this.blur)this.blur()" onMouseOver="writetxt('<div><img src=mysticzon-titans.png border=0 height=412 width=480></div>')" onMouseOut="writetxt(0)">
</map>

Since this is just for me, I don't need this to be cross-browser compatible. I use Chrome and that's all this has to work in. I have an old but still reliable image edit app that will outline the image map's hot spot co-ordinates, so I'm good to go in that department.

I'd appreciate it very much if anybody can point me in the right direction of how to make this work.

**keyboard** · 06-26-2020, 01:35 AM

Hey Deanna, welcome to the forums.

So there's a couple of problems with the code sample you provided.
- The </div> right after the map is stopping it from working
- You're calling a function (writetxt) that isn't defined in what you provided

Anyways I wrote up a full example for you (see below). I used the sample images you provided and added one area to test.
The only thing not included is making sure it fits within the view port. Let me know if you still need this and I'll take a look.

HTML Code:

<!DOCTYPE html>

<html>
	<head>
		<style type="text/css">
			#centeredMain {
				/*
					Center the div
				*/
				margin:auto; 
			}

			.tooltip {
				animation: fadein .25s;
			}

			@keyframes fadein {
			    from {
			    	opacity:0;
			    }
			    to {
			    	opacity:1;
			    }
			}

		</style>
		<script type="text/javascript">
			//An object of all the tooltips in the format tooltipName:imageLocation
			const tooltips = {
				"titansRevenge": "https://cdn.itemforge.com/catalog/product/cache/image/1000x1320/e9c3970ab036de70892d86c6d221abfe/t/i/titan-revenge-eth-upg.jpg"
			};

			//Run once the page is fully loaded
			document.addEventListener("DOMContentLoaded", () => {
			    const areas = document.querySelectorAll("area");

			    //Loop through all the areas
			    for(let i=0; i<areas.length; i++) {

			    	areas[i].addEventListener("mouseover", (e) => {
			    		const target = e.target.getAttribute("data-tooltip");
			    		const coords = e.target.getAttribute("coords").split(",");

			    		//Create an image to use as a tooltip
			    		let tooltip = document.createElement("img");
						tooltip.src = tooltips[target];
						tooltip.classList.add("tooltip");

			    		//ID so it can be removed later
			    		tooltip.id = target;

			    		//Positition it
			    		tooltip.style.position = "absolute";
			    		tooltip.style.top = coords[1] + "px"
			    		tooltip.style.left = (+coords[2] + 100) + "px"
			    		tooltip.style.zIndex = "2";

			    		//Add it to the body of the page
			    		document.body.appendChild(tooltip);

			    	});

			    	areas[i].addEventListener("mouseout", (e) => {
			    		const target = e.target.getAttribute("data-tooltip");
			    		document.getElementById(target).remove();
			    	});
			    }

			});

		</script>
	</head>
	<body>
		<div id="centeredMain">
			<img src="http://theinspirationgallery.com/D2-2020/images/image_map_example.png" usemap="#mysticzon">
			<map name="mysticzon">
				<area shape="rect" coords="529,304,595,431" alt="Titan's Revenge" data-tooltip="titansRevenge">
			</map>
		</div>
	</body>
</html>

**Deanna** · 06-27-2020, 06:56 AM

Hi and thank you for your help on this project, Keyboard. Your time and effort are much appreciated.

That having been said, I am out of town unti Sunday and will not have a chance to appy your code until I am back home on my laptop, but rest assured, as soon as I am able, I'll implement it and see how it looks.

Thanks again and I'm sure we'll talk again in a few.

**Deanna** · 07-15-2020, 05:10 AM

Good evening, Keyboard. My apologies for not getting back here sooner with more feedback about the script you wrote for me. My father passed away on July 1st and I've been looking after his estate since then. I think I'm going to have to put my project on the back burner for a little while as I get his affairs in order. Thank you for understanding. If and when there comes a time when things settle down, I'll return to this thread and try to pick up where we left off. Again, thanks very much.