Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2008
    Location
    Michigan
    Posts
    216
    Thanks
    10
    Thanked 1 Time in 1 Post

    DIV disappears on image map mouseover. Need it to stay open to click link in DIV

    I have a map with hotspots, and when you hover over a hot spot, a hidden DIV appears. Thanks to my favorite coding forum, this one, I was able to successfully accomplish this first bit of code. The only problem I'm having now is getting the DIV to remain open while I move my mouse from the hotspot to the DIV. As soon as I move my mouse away from the hotspot, the DIV disappears. I need to put links in the DIVs, and users will need to be able to move their mouse away from the hotspot to click on the link, but currently can't.

    I experimented with setTimeout, but didn't get too far. If anyone could help me, I'd appreciate it. I really need to get this working.

    Code:
    <img src="images/map.png" alt="" usemap="#map"/>
    			
    <map id="map" name="map">
    <area shape="rect" coords="211,84,225,97" href="#" alt=""/>
    <area shape="rect" coords="226,78,240,92" href="#" alt=""/>
    <area shape="rect" coords="353,66,376,89" href="#" alt=""/>
    </map>
    
    <div id="hidden">
    	<div class="location" style="left:25px; top:-290px;">
    		<img src="images/location01.jpg" alt=""/>
    	</div>
    				
    	<div class="location" style="left:25px; top:-275px;">				
    		<img src="images/location02.jpg" alt=""/>
    	</div>
    
    	<div class="location" style="left:275px; top:-285px;">
    		<img src="images/location03.jpg" alt=""/>
    	</div>
    </div> <!-- #hidden -->
    Code:
    function show(which) {
    	var area = document.getElementById("map").getElementsByTagName("area");
    	var locations = document.getElementById("hidden").getElementsByTagName("div");
    
    	for (var a=0; a < area.length; ++a) {
    		if(area[a] == which) locations[a].style.display="block";
    		}
    	}
    					
    function hide() {
    	var locations = document.getElementById("hidden").getElementsByTagName("div");
    
    	for (var d=0; d < locations.length; ++d) {
    		locations[d].style.display="none";
    		}
    	}
    					
    function init() {
    	var area = document.getElementById("map").getElementsByTagName("area");
    
    	for (var a=0; a < area.length; ++a) {
    		area[a].onmouseover = function() { show(this); }
    		area[a].onmouseout = hide;
    		}
    	}
    
    window.onload = init;

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    You should remove area[a].onmouseout = hide first and then you amend the function show() like this
    Code:
    function show(which) {
    	var area = document.getElementById("map").getElementsByTagName("area");
    	var locations = document.getElementById("hidden").getElementsByTagName("div");
    
    	for (var a=0; a < area.length; ++a) {
    		if(area[a] == which) {
    			locations[a].style.display="block";
    		} else {
    			locations[a].style.display="none";
    		}
    	}
    The function hide() can then also be removed

  • Users who have thanked devnull69 for this post:

    nicky (08-24-2011)

  • #3
    Regular Coder
    Join Date
    May 2008
    Location
    Michigan
    Posts
    216
    Thanks
    10
    Thanked 1 Time in 1 Post
    Yay! Thank you, thank you, thank you!


  •  

    Posting Permissions

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