Results 1 to 6 of 6

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

  1. #1
    Join Date
    May 2020
    Posts
    3
    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
    2,026
    Thanks
    59
    Thanked 108 Times in 106 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
    3
    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.

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

    Default

    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.

  5. #5
    Join Date
    Mar 2011
    Posts
    2,026
    Thanks
    59
    Thanked 108 Times in 106 Posts
    Blog Entries
    4

    Default

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

  6. #6
    Join Date
    Jun 2020
    Location
    India
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>
    Last edited by james438; 07-19-2020 at 03:18 AM. Reason: format

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
  •