Results 1 to 3 of 3

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

  1. #1
    Join Date
    May 2020
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,999
    Thanks
    59
    Thanked 107 Times in 105 Posts
    Blog Entries
    4

    Default

    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>
    Last edited by keyboard; 06-26-2020 at 03:02 AM.

  3. #3
    Join Date
    May 2020
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. Replies: 1
    Last Post: 09-23-2012, 02:46 AM
  2. Combining "Featured image zoomer" "and "Image thumbnail viewer II"
    By novastar in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-17-2011, 10:10 PM
  3. Combining "Featured Image Zoomer" and "Image Thumbnail Viewer II"
    By pennzman543 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-05-2011, 01:26 AM
  4. Popup image NOT in "regular" window: how-to?
    By tedaltenberg in forum JavaScript
    Replies: 5
    Last Post: 01-04-2009, 03:11 AM
  5. Replies: 2
    Last Post: 11-19-2007, 07:37 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •