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 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery imagemap revisited mod

    Need some help making a modification to the jQuery imagemap revisited script. Really just looking to mod the right side, the left side with the map works prefectly for what I'm looking to use it for. Instead of having the hidden information show up when you rollover the map on the left, I'd have a list that's always present and when you rollover it the left side of the map will highlight over. I'm attaching an image for you guys to see what I'm talking about. So for example, when you hover over "Example 1" the top part of the map will highlight and so on. If you click on it, it will stay highlighted like it presently does. Any help would be greatly appreciated.


  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    Hi,
    If the list on the right side stays the same, couldn't that be achieved just by using plain javascript, ...or even a plain CSS?

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hdewantara View Post
    Hi,
    If the list on the right side stays the same, couldn't that be achieved just by using plain javascript, ...or even a plain CSS?
    The list its-self stays the same... but the way I'd like it set up is when you hover over the list items (on the right) the left side of the map will highlight like it currently does. The styling of the list would be done via CSS of course, but we need to tie in the list to act on the hover state so the map will highlight when it's hovered over. Anyone have any suggestions? I'd greatly appreciate it for some help here.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    You won't need image maps for this ... you only need image maps to enable image regions to react on mouse events. If you only want to highlight certain parts of an image you can use the main map and the highlighted parts, but you can omit all the image map stuff.

  • #5
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    Well, since no one answered...
    I'll give the native javascript version below, which still needs more coding to work on other browsers such as IE.
    But I hope the logic is right and eases your way for jQuery conversion.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>HTML image map revisited - demo</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    	<style type="text/css">
    		.clearboth {
    			clear: both;
    		}
    		
    		#map-view-container {
    			position: relative;
    		}
    
    		#map-container {
    			float: left;
    			position: relative;
    		}
    
    		#map-view-container img.map {
    			position: relative;
    			z-index: 100;
    		}
    		
    		#map-view-container img.region {
    			display: none;
    			left: 0px;
    			position: absolute;
    			top: 0px;
    			z-index: 20;
    		}		
    		
    		#map-view-container img.regionBg {
    			left: 0px;
    			position: absolute;
    			top: 0px;
    			z-index: 19;
    		}
    
    		#practice-container {
    			float: left;
    			position: relative;
    		}
    		
    		#practice-container ul {
    			/*display: none;*/
    		}
    		
    		#practice-container ul.selected {
    			display: inline;
    		}
    		
    		#practice-container ul li {
    			list-style-type: none;
    		}
    
    		#practice-container .selected-list ul li {
    			list-style-type: none;
    		}
    	</style>
    	
    	<script type="text/javascript" src="http://www.workwithchoicecuts.com/demo/html-image-map-revisted/jquery-1.3.2.min.js"></script>
    	<script type="text/javascript">
    	
    		jQuery(document).ready(function() {
    			
    			jQuery("#map-container AREA").mouseover(function(){
    				var regionMap = '.'+$(this).attr('id')+'-map';
    				//var regionList = '.'+$(this).attr('id')+'-list';
    				jQuery(regionMap).css('display', 'inline');
    
    				// Check if a click event has occured and only change the Region hover state accodringly
    				//if (! jQuery('#practice-container ul').hasClass('selected')) {
    				//	jQuery(regionList).css('display', 'inline');
    				//}
    			}).mouseout(function(){
    				var regionMap = '.'+$(this).attr('id')+'-map';
    				//var regionList = '.'+$(this).attr('id')+'-list';
    
    				// Check if a click event has occured and only change the Region hover state accodringly
    				if (! jQuery(regionMap).hasClass('selected')) {
    					jQuery(regionMap).css('display', 'none');
    				}
    
    				// Check if a click event has occured and only change the Region hover state accodringly
    				//if (! jQuery('#practice-container ul').hasClass('selected')) {
    				//	jQuery(regionList).css('display', 'none');
    				//}
    			});
    
    			jQuery("#map-container AREA").click(function(){
    				jQuery('#map-container img.region').removeClass('selected').css('display', 'none');
    				//jQuery('#practice-container ul').removeClass('selected').css('display', 'none');
    				
    				var regionMap = '.'+$(this).attr('id')+'-map';
    				//var regionList = '.'+$(this).attr('id')+'-list';
    				jQuery(regionMap).addClass('selected').css('display', 'inline');
    				//jQuery(regionList).addClass('selected').css('display', 'inline');
    			});
    
    		});
    		
    	</script>
    
    	<script type="text/javascript">
    	var 
    		timer = setInterval(
    			function(){
    				var 
    					list = document.getElementById("practice-container");
    				if (list){
    					clearInterval(timer);
    					
    					//DOM IS READY
    					var 
    						items = list.getElementsByTagName("a");
    					for (var i = 0; i < items.length; i++){
    
    						items[i].addEventListener("mouseover",
    							function(ev){
    								var
    									href_str = ev.target.href.split("#"),
    									region_str = href_str[1] + "-map",
    									regions = document.getElementById("map-container").getElementsByTagName("img");
    								for (var i = 0; i < regions.length; i++){
    									class_str = regions[i].className.split(" ");
    									if (class_str[0] == "region") {
    										if (class_str[1] == region_str){
    											regions[i].style.display = "inline";
    											break;
    										}
    									}
    								}
    							}
    						,false);
    						
    
    						items[i].addEventListener("mouseout",
    							function(ev){
    								var
    									href_str = ev.target.href.split("#"),
    									region_str = href_str[1] + "-map",
    									regions = document.getElementById("map-container").getElementsByTagName("img");
    								for (var i = 0; i < regions.length; i++){
    									class_str = regions[i].className.split(" ");
    									if (class_str[0] == "region") {
    										if (class_str[1] == region_str){
    											regions[i].style.display = "none";
    											break;
    										}
    									}
    								}
    							}
    						,false);
    					}
    				}
    			}
    		,100);
    	</script>
    	
    </head>
    <body>
    
    	<h1>DEMO - HTML Image Map Revisited</h1>
    
    	<div id="map-view-container">
    		<div id="map-container">
    			
    			<img src='http://www.workwithchoicecuts.com/demo/html-image-map-revisted/transparentMap.gif' width='274' height='436' border='0' alt='' usemap='#regionMapView' class='map' />
    			<map name='regionMapView' id='regionMapView'>
    				<area id='midlands' shape='poly' alt='Midlands and East Anglia' coords='199,266, 194,266, 191,268, 189,271, 184,273, 181,273, 178,275, 176,276, 174,278, 172,279, 172,277, 170,278, 169,280, 167,280, 165,281, 164,282, 158,282, 156,280, 154,279, 153,280, 152,282, 154,284, 147,285, 141,286, 139,287, 138,290, 135,290, 132,293, 128,293, 127,292, 126,293, 124,296,124,300, 128,301, 128,306, 127,306, 125,308, 125,310, 127,311, 124,315, 124,317, 125,318, 128,320, 128,325, 126,327, 124,332, 124,336, 125,341, 127,342, 129,342, 130,343, 132,343, 133,342, 136,340, 139,340, 141,341, 144,344, 147,345, 151,343, 151,342, 155,343, 158,345, 159,344, 160,341, 163,338, 166,338, 167,342, 171,342,176,341, 179,343, 181,344, 182,346, 183,347, 184,350, 182,351, 182,352, 183,354, 183,357, 185,359, 187,358, 188,357, 190,355, 192,353, 197,353, 198,355, 200,356, 201,357, 203,358, 204,359, 212,359, 213,361, 217,361, 220,358, 225,358, 225,357, 227,357, 233,356, 243,341, 252,328, 254,306, 240,290, 220,289, 216,286, 215,274,207,269, 203,268, 201,267, 199,267' href='#midlands' />
    				<area id='southEast' shape='poly' alt='South East England' coords='163,340, 166,342, 168,344, 171,343, 176,343, 178,344, 180,347, 182,348, 181,350, 180,353, 181,355, 182,357, 182,359, 184,360, 184,364, 186,367, 188,369, 190,370, 194,370, 198,368, 204,365, 205,362, 210,361, 213,363, 217,363, 220,361, 223,361, 227,361, 230,363, 232,366, 234,365, 238,364,244,364, 245,366, 243,367, 245,370, 246,376, 236,381, 235,386, 212,397, 188,395, 181,396, 179,394, 177,396, 173,404, 165,403, 158,398, 154,395, 149,392, 147,390, 153,385, 153,381, 151,379, 151,377, 155,375, 155,369, 154,368, 154,363, 158,357, 158,355, 156,353, 157,352, 160,347, 161,343' href='#southEast' />
    				<area id='southWest' shape='poly' alt='South West England' coords='153,397, 151,395, 149,393, 145,391, 145,388, 151,384, 151,381, 150,381, 149,379, 149,377, 153,374, 152,370, 152,362, 154,357, 156,356, 154,354, 155,351, 157,348, 157,347, 153,344, 150,345, 149,347, 144,346, 139,342, 135,343, 133,346, 134,350, 135,352, 135,355, 131,358, 130,361, 126,363,121,368, 121,374, 109,374, 105,372, 99,370, 86,372, 76,382, 61,401, 42,417, 42,425, 57,432, 70,418, 87,413, 96,419, 105,419, 110,412, 110,402, 124,398, 134,403, 144,402, 149,405, 154,399' href='#southWest' />
    				<area id='southWales' shape='poly' alt='South Wales' coords='95,315, 99,313, 108,313, 117,317, 120,317, 122,318, 124,319, 125,321, 126,321, 126,325, 124,327, 123,328, 123,330, 122,331, 122,337, 123,338, 123,342, 129,345, 131,345, 131,350, 132,351, 133,353, 131,355, 129,356, 127,358, 121,358, 119,360, 116,364, 114,365, 113,366, 108,366, 104,362, 101,361,100,359, 100,357, 99,357, 98,354, 96,354, 94,357, 90,358, 86,358, 85,356, 83,353, 77,353, 67,357, 59,355, 55,341, 61,334, 72,327, 84,323, 91,316' href='#southWales' />
    				<area id='northWales' shape='poly' alt='North Wales' coords='115,277, 117,280, 118,282, 120,284, 122,286, 124,287, 126,287, 126,291, 125,291, 122,295, 122,300, 125,303, 125,305, 123,307, 123,311, 124,312, 121,315, 116,315, 110,311, 95,311, 93,313, 89,310, 90,299, 84,304, 73,303, 74,297, 84,289, 76,280, 76,276, 86,271, 96,279, 100,277, 110,277, 113,276' href='#northWales' />
    				<area id='northWest' shape='poly' alt='North West England' coords='112,211, 114,209, 115,208, 116,206, 119,206, 119,207, 121,208, 122,207, 123,206, 125,204, 126,202, 128,201, 134,201, 135,203, 135,207, 133,208, 134,210, 136,213, 137,214, 138,215, 138,221, 142,225, 142,230, 143,230, 144,233, 144,237, 140,241, 139,244, 138,246, 139,248, 140,250, 143,251,145,253, 147,254, 148,258, 148,262, 147,264, 147,266, 150,267, 149,271, 151,275, 152,278, 151,279, 150,282, 146,283, 141,284, 141,285, 138,285, 136,287, 135,287, 133,289, 131,291, 128,291, 128,287, 126,285, 122,284, 118,279, 117,275, 123,274, 120,269, 119,261, 122,249, 123,245, 116,247, 112,240, 109,232, 106,221, 110,213' href='#northWest' />
    				<area id='scotland' shape='poly' alt='Scotland' coords='155,176, 154,176, 153,177, 152,178, 152,179, 151,179, 151,180, 150,180, 149,184, 148,185, 146,186, 144,189, 142,192, 137,193, 134,195, 132,197, 132,200, 126,200, 126,201, 124,202, 124,203, 122,204, 122,205, 121,205, 120,206, 118,205, 116,205, 116,206, 115,206, 114,205, 111,205, 111,206,110,206, 108,210, 106,210, 106,211, 104,211, 103,211, 102,212, 100,214, 94,214, 90,219, 72,219, 65,204, 76,188, 71,184, 58,190, 50,189, 39,175, 32,172, 40,140, 42,129, 48,120, 40,113, 41,97, 24,95, 24,107, 16,106, 17,78, 29,54, 49,44, 53,46, 51,63, 57,72, 68,70, 65,65, 69,55, 79,41, 84,41, 87,43, 109,43, 119,40, 115,30, 119,15, 131,6, 140,12, 139,23, 135,33, 131,37, 124,39, 125,41, 126,44, 126,52, 103,72, 102,77, 105,77, 106,79, 104,84, 113,82, 151,83, 155,90, 154,98, 150,102, 150,110, 138,129, 137,133, 130,140, 130,144, 136,147, 136,149, 130,152, 124,152, 121,156, 115,158, 118,161, 129,157, 134,157, 146,163, 149,169, 150,173' href='#scotland' />
    				<area id='london' shape='poly' alt='London' coords='186,365, 186,360, 187,360, 187,359, 188,359, 188,358, 189,358, 189,357, 191,357, 191,356, 192,356, 192,355, 196,355, 196,356, 198,356, 198,357, 200,358, 200,359, 201,359, 201,360, 203,360, 203,362, 202,362, 202,364, 200,364, 199,365, 198,366, 195,366, 194,367, 193,367, 193,368, 191,368,190,367, 188,367, 188,366, 187,366, 187,365' href='#london' />
    				<area id='north' shape='poly' alt='North England' coords='134,200, 134,197, 138,194, 142,194, 146,190, 146,187, 149,187, 150,184, 151,184, 151,181, 155,177, 157,177, 159,180, 159,184, 160,184, 160,186, 159,186, 159,189, 160,189, 160,195, 162,195, 162,200, 163,200, 163,203, 165,204, 166,206, 166,209, 167,209, 167,215, 170,218, 171,221, 174,222,179,222, 182,224, 185,228, 187,228, 189,230, 189,232, 191,232, 192,234, 193,235, 194,239, 196,241, 196,242, 199,242, 199,243, 198,243, 198,245, 197,246, 197,250, 198,250, 198,253, 200,255, 200,257, 202,257, 204,259, 204,261, 206,263, 205,264, 204,264, 204,266, 203,266, 202,264, 195,264, 192,266, 190,267, 190,268, 189,268,189,269, 188,269, 188,270, 185,270, 185,271, 179,271, 179,273, 175,273, 175,274, 174,274, 174,276, 172,276, 172,275, 169,275, 169,276, 167,278, 166,278, 164,280, 157,280, 153,276, 153,275, 152,275, 152,270, 151,270, 151,265, 150,265, 150,257, 149,257, 149,254, 148,253, 147,253, 146,252, 146,251, 144,251, 143,249, 142,249,141,248, 141,247, 140,247, 140,245, 141,245, 141,242, 145,238, 147,238, 146,235, 146,232, 145,232, 144,229, 144,223, 142,223, 140,221, 140,215, 139,214, 139,212, 137,212, 137,211, 136,211, 136,210, 135,210, 135,208, 136,208, 136,201, 135,201' href='#north' />
    			</map>
    			
    			<img src='http://www.workwithchoicecuts.com/demo/html-image-map-revisted/mvScotland.gif' width='274' height='436' border='0' class='region scotland-map' alt='Scotland' />
    			<img src='http://www.workwithchoicecuts.com/demo/html-image-map-revisted/mvNorth.gif' width='274' height='436' border='0' class='region north-map' alt='North England' />
    			<img src='http://www.workwithchoicecuts.com/demo/html-image-map-revisted/mvNorthWest.gif' width='274' height='436' border='0' class='region northWest-map' alt='North West England' />
    			<img src='http://www.workwithchoicecuts.com/demo/html-image-map-revisted/mvNorthWales.gif' width='274' height='436' border='0' class='region northWales-map' alt='North Wales' />
    			<img src='http://www.workwithchoicecuts.com/demo/html-image-map-revisted/mvSouthWales.gif' width='274' height='436' border='0' class='region southWales-map' alt='South Wales' />
    			<img src='http://www.workwithchoicecuts.com/demo/html-image-map-revisted/mvMidlands.gif' width='274' height='436' border='0' class='region midlands-map' alt='Midlands and East Anglia' />
    			<img src='http://www.workwithchoicecuts.com/demo/html-image-map-revisted/mvSouthWest.gif' width='274' height='436' border='0' class='region southWest-map' alt='South West England' />
    			<img src='http://www.workwithchoicecuts.com/demo/html-image-map-revisted/mvSouthEast.gif' width='274' height='436' border='0' class='region southEast-map' alt='South East England' />
    			<img src='http://www.workwithchoicecuts.com/demo/html-image-map-revisted/mvLondon.gif' width='274' height='436' border='0' class='region london-map' alt='London England' />	
    
    
    			<img src="http://www.workwithchoicecuts.com/demo/html-image-map-revisted/mvBritain.gif" width="274" height="436" class="regionBg" />
    		</div>
    		
    		<div id="practice-container">
    			<ul>
    				<li><a href="#london">London </a></li>
    				<li><a href="#midlands">Midlands &amp; East Anglia </a></li>
    				<li><a href="#southWest">South West </a></li>
    				<li><a href="#northWales">North Wales </a></li>
    				<li><a href="#southEast">South East </a></li>
    				<li><a href="#north">North </a></li>
    				<li><a href="#northWest">North West </a></li>
    				<li><a href="#southWales">Cardiff &amp; South Wales </a></li>
    				<li><a href="#scotland">Scotland </a></li>
    			</ul>
    		</div>
    		
    		<div class="clearboth"> <!-- blah, Blah --> </div>
    	</div>
    
    	<p><tt>Created by <a href="mailto:ian@choicecuts.ie">Ian Huet</a> for <a href="http://www.workwithchoicecuts.com/methodology/revisiting-the-html-image-map/">ChoiceCuts</a>, Ireland. 2010</tt></p>
    
    	<p><tt>Modified by Hendra @ <a href="www.smokingscript.com">smokingscript.com</a>, Jakarta - Indonesia, 2011.</tt></p>
    
    </body>
    </html>

  • #6
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hdewantara View Post
    Well, since no one answered...
    I'll give the native javascript version below, which still needs more coding to work on other browsers such as IE.
    But I hope the logic is right and eases your way for jQuery conversion.
    Yea, you nailed it on how I wanted the funtionality of it. Really nice job there. Is it possible to convert it to jQuery so it works in IE (plus to keep it uniform with the rest of the script)? I thought it'd be changing some of the jQuery code around, so it activates on the hover state of the list. I really don't know enough jQuery to mod it myself, so I'd greatly appreciate some help by you guys.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    With html:

    Code:
    	<div id="map-view-container">
    		<div id="map-container">
    			
    			<img src='transparentMap.gif' width='274' height='436' border='0' alt='' usemap='#regionMapView' class='map' />
    
    			
    			<img src='mvScotland.gif' width='274' height='436' border='0' class='region scotland-map' alt='Scotland' />
    			<img src='mvNorth.gif' width='274' height='436' border='0' class='region north-map' alt='North England' />
    			<img src='mvNorthWest.gif' width='274' height='436' border='0' class='region northWest-map' alt='North West England' />
    			<img src='mvNorthWales.gif' width='274' height='436' border='0' class='region northWales-map' alt='North Wales' />
    			<img src='mvSouthWales.gif' width='274' height='436' border='0' class='region southWales-map' alt='South Wales' />
    			<img src='mvMidlands.gif' width='274' height='436' border='0' class='region midlands-map' alt='Midlands and East Anglia' />
    			<img src='mvSouthWest.gif' width='274' height='436' border='0' class='region southWest-map' alt='South West England' />
    			<img src='mvSouthEast.gif' width='274' height='436' border='0' class='region southEast-map' alt='South East England' />
    			<img src='mvLondon.gif' width='274' height='436' border='0' class='region london-map' alt='London England' />	
    
    			<img src="mvBritain.gif" width="274" height="436" class="regionBg" />
    
    		</div>
    		
    		<div id="practice-container">
    			<ul>
    				<li><a href="" rel="london-map">London Example</a></li>
    				<li><a href="#" rel="midlands-map">Midlands &amp; East Anglia</a></li>
    				<li><a href="#" rel="southWest-map">South West</a></li>
    				<li><a href="#" rel="northWales-map">North Wales</a></li>
    				<li><a href="#" rel="southEast-map">South East</a></li>
    				<li><a href="#" rel="north-map">North</a></li>
    				<li><a href="#" rel="northWest-map">North West</a></li>
    				<li><a href="#" rel="southWales-map">Cardiff &amp; South Wales</a></li>
    				<li><a href="#" rel="scotland-map">Scotland</a></li>
    
    			</ul>
    		</div>
    note added rel attributes to your links, then this should do it:

    Code:
    	<script type="text/javascript">
    	$(document).ready(function(){
    		
    		$('#practice-container li a').hover(function(){
    			$('#map-container img.'+$(this).attr('rel')).addClass('hover');
    			},function(){
    			$('#map-container img.'+$(this).attr('rel')).removeClass('hover');
    		});
    		
    		$('#practice-container li a').click(function(){
    			$('#map-container img.'+$(this).attr('rel')).toggleClass('clicked');
    			return false;
    		});
    			
    	
    	})
    	
    		
    	</script>
    plus another line of css:

    Code:
    		#map-view-container img.hover, #map-view-container img.clicked{
    			display: block;
    		}
    This assumes that if an area is clicked it remains highlighted until clicked again regardless of hover, and that multiple areas can be highlighted at once on the map. All the jQuery is doind is reading the rel attribute on the clicked link, finding the matching image and adding/removing a class which sets display:block. As previous posters have said, you don't need the imagemap.
    Last edited by SB65; 04-19-2011 at 05:56 PM.


  •  

    Posting Permissions

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