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.

**keyboard** · 07-15-2020, 07:45 AM

Good evening Deanna. Sorry to hear that. There is absolutely no reason to apologise! Best wishes for you and your family.

**Sanjaykumarro** · 07-18-2020, 10:21 AM

You can use JavaScript to create client-side image map. Client-side image maps are enabled by the usemap attribute for the <img /> tag and defined by special <map> and <area> extension tags.

The image that is going to form the map is inserted into the page using the <img /> element as normal, except that it carries an extra attribute called usemap. The value of the usemap attribute is the value of the name attribute on the <map> element, which you are about to meet, preceded by a pound or hash sign.

The <map> element actually creates the map for the image and usually follows directly after the <img /> element. It acts as a container for the <area /> elements that actually define the clickable hotspots. The <map> element carries only one attribute, the name attribute, which is the name that identifies the map. This is how the <img /> element knows which <map> element to use.

The <area> element specifies the shape and the coordinates that define the boundaries of each clickable hotspot.

The following code combines imagemaps and JavaScript to produce a message in a text box when the mouse is moved over different parts of an image.

Code:

<html>   
   <head>
      <title>Using JavaScript Image Map</title>
      
      <script type = "text/javascript">
         <!--
            function showTutorial(name) {
               document.myform.stage.value = name
            }
         //-->
      </script>
   </head>
   
   <body>
      <form name = "myform">
         <input type = "text" name = "stage" size = "20" />
      </form>
      
      <!-- Create  Mappings -->
      <img src = "/images/usemap.gif" alt = "HTML Map" border = "0" usemap = "#tutorials"/>
      
      <map name = "tutorials">
         <area shape="poly" 
            coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial"
            target = "_self" 
            onMouseOver = "showTutorial('perl')" 
            onMouseOut = "showTutorial('')"/>
         
         <area shape = "rect" 
            coords = "22,83,126,125"
            href = "/html/index.htm" alt = "HTML Tutorial" 
            target = "_self" 
            onMouseOver = "showTutorial('html')" 
            onMouseOut = "showTutorial('')"/>
         
         <area shape = "circle" 
            coords = "73,168,32"
            href = "/php/index.htm" alt = "PHP Tutorial"
            target = "_self" 
            onMouseOver = "showTutorial('php')" 
            onMouseOut = "showTutorial('')"/>
      </map>
   </body>
</html>

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

Thread Tools

Search Thread

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

Similar Threads

Combining "Image Power Zoomer v1.1" with "Ultimate Fade-in slideshow (v2.4)"

Combining "Featured image zoomer" "and "Image thumbnail viewer II"

Combining "Featured Image Zoomer" and "Image Thumbnail Viewer II"

Popup image NOT in "regular" window: how-to?

How to combine "Scrollable Menu Links" with "Image Thumbnail Viewer II"?

Bookmarks

Bookmarks

Posting Permissions