www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] How to link an object to a url / div tag / shadowbox

  1. #1
    Join Date
    May 2013
    Location
    Richmond, VA
    Posts
    3

    resolved [RESOLVED] How to link an object to a url / div tag / shadowbox

    My client wants a map that allows you to hover over certain states and when certains states are clicked company logos appear some how (in a div tag above or below the map or in a shadowbox window)

    I have the map built but i'm new to javascript and am having a hard time figuring out how to link each state.

    Here's a link to the map page: http://s469373104.onlinehome.us/our-...iers-by-state/

    Code:
    <!DOCTYPE html>
    <html>
    <body style="margin:0px;">
    
    <script src="/wp-content/themes/midAtlantic_2_12_11/lib/raphael.js"></script>
    	<!-- <script src="scale.raphael.js"></script> -->
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    	<script src="/wp-content/themes/midAtlantic_2_12_11/s/color.jquery.js"></script>
    	<script src="/wp-content/themes/midAtlantic_2_12_11/js/us-map.js"></script>
    	
    	<script>
    	$(document).ready(function() {
    	  $('#map').usmap({
    	    'stateSpecificHoverStyles': {
    	      'HI' : {fill: '#ccc'},
    		  'AK' : {fill: '#ccc'},
    		  'WA' : {fill: '#ccc'},
    		  'ID' : {fill: '#ccc'},
    		  'MT' : {fill: '#ccc'},
    		  'WY' : {fill: '#ccc'},
    		  'ND' : {fill: '#ccc'},
    		  'IA' : {fill: '#ccc'},
    		  'MN' : {fill: '#ccc'},
    		  'WI' : {fill: '#ccc'},
    		  'UT' : {fill: '#ccc'},
    		  'NE' : {fill: '#ccc'},
    		  'SD' : {fill: '#ccc'}
    	    },
    		stateSpecificStyles: {
        'AL': {fill: '#d2232a'},
    	'AR': {fill: '#d2232a'},
    	'AZ': {fill: '#d2232a'},
    	'CA': {fill: '#d2232a'},
    	'CO': {fill: '#d2232a'},
    	'CT': {fill: '#d2232a'},
    	'DC': {fill: '#d2232a'},
    	'DE': {fill: '#d2232a'},
    	'FL': {fill: '#d2232a'},
    	'GA': {fill: '#d2232a'},
    	'IL': {fill: '#d2232a'},
    	'IN': {fill: '#d2232a'},
        'KS': {fill: '#d2232a'},
    	'KY': {fill: '#d2232a'},
    	'LA': {fill: '#d2232a'},
    	'ME': {fill: '#d2232a'},
    	'MD': {fill: '#d2232a'},
    	'MA': {fill: '#d2232a'},
    	'MI': {fill: '#d2232a'},
    	'MO': {fill: '#d2232a'},
    	'MS': {fill: '#d2232a'},
    	'NC': {fill: '#d2232a'},
    	'NH': {fill: '#d2232a'},
    	'NJ': {fill: '#d2232a'},
    	'NM': {fill: '#d2232a'},
    	'NY': {fill: '#d2232a'},
    	'NV': {fill: '#d2232a'},
    	'OH': {fill: '#d2232a'},
    	'OK': {fill: '#d2232a'},
    	'OR': {fill: '#d2232a'},
    	'PA': {fill: '#d2232a'},
    	'RI': {fill: '#d2232a'},
    	'SC': {fill: '#d2232a'},
    	'TN': {fill: '#d2232a'},
    	'TX': {fill: '#d2232a'},
    	'VA': {fill: '#d2232a'},
    	'VT': {fill: '#d2232a'},
    	'WV': {fill: '#d2232a'}
      }, 
    		
    		
    		
    	    
    	    'mouseoverState': {
    	      'HI' : function(event, data) {
    	        //return false;
    	      }
    	    },
    	    
    	    
    	    'click' : function(event, data) {
    	      $('#alert')
    	        .text('Click '+data.name+' on map 1')
    	        .stop()
    	        .css(backgroundColor, '#ccc')
    	        .animate({backgroundColor: '#ccc'}, 1000);
    	    }
    	  });
    	  
    	});
    	</script>
        
        
      <div id="alert">Click alerts</div>
      
      <div id="map" style="width: 800px; height: 630px; border: solid 0px #ccc; margin:auto;"></div>
      
    
    </body>
    </html>

  2. #2
    Join Date
    May 2013
    Location
    Richmond, VA
    Posts
    3

    Cool

    I made some progress and got the pop up window working, I cant figure out how to target a specific state though. Right now no matter which state is clicked, the same pop up window opens, I need each state to open a different window. This seems like something that should be really easy but if you can't tell just started working with javascript so please excuse my lack of knowledge.

    This is the code i need to make specific to the state of virginia rather than every state opening the same window.

    Code:
        'click' : function(event, data) {
    		     window.open('/wp-content/themes/midAtlantic_2_12_11/carriers/va.php','_blank','height=500, width=800, scrollbars=no, channelmode=yes, menubar=no, left=480, top=200, titlebar=no, toolbar=no, location=no status=no','false')
    	    }
    	  });
    	  
    	});

    Full page of code
    Code:
    <!DOCTYPE html>
    <html>
    <body style="margin:0px;">
    <script src="/wp-content/themes/midAtlantic_2_12_11/lib/raphael.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    <script src="/wp-content/themes/midAtlantic_2_12_11/s/color.jquery.js"></script>
    <script src="/wp-content/themes/midAtlantic_2_12_11/js/us-map.js"></script>
    <script>
    	$(document).ready(function() {
    	  $('#map').usmap({
    	    'stateSpecificHoverStyles': {
    	      'HI' : {fill: '#ccc'},
    		  'AK' : {fill: '#ccc'},
    		  'WA' : {fill: '#ccc'},
    		  'ID' : {fill: '#ccc'},
    		  'MT' : {fill: '#ccc'},
    		  'WY' : {fill: '#ccc'},
    		  'ND' : {fill: '#ccc'},
    		  'IA' : {fill: '#ccc'},
    		  'MN' : {fill: '#ccc'},
    		  'WI' : {fill: '#ccc'},
    		  'UT' : {fill: '#ccc'},
    		  'NE' : {fill: '#ccc'},
    		  'SD' : {fill: '#ccc'}
    	    },
    		'stateSpecificStyles': {
    		'AL': {fill: '#d2232a'},
    		'AR': {fill: '#d2232a'},
    		'AZ': {fill: '#d2232a'},
    		'CA': {fill: '#d2232a'},
    		'CO': {fill: '#d2232a'},
    		'CT': {fill: '#d2232a'},
    		'DC': {fill: '#d2232a'},
    		'DE': {fill: '#d2232a'},
    		'FL': {fill: '#d2232a'},
    		'GA': {fill: '#d2232a'},
    		'IL': {fill: '#d2232a'},
    		'IN': {fill: '#d2232a'},
    		'KS': {fill: '#d2232a'},
    		'KY': {fill: '#d2232a'},
    		'LA': {fill: '#d2232a'},
    		'ME': {fill: '#d2232a'},
    		'MD': {fill: '#d2232a'},
    		'MA': {fill: '#d2232a'},
    		'MI': {fill: '#d2232a'},
    		'MO': {fill: '#d2232a'},
    		'MS': {fill: '#d2232a'},
    		'NC': {fill: '#d2232a'},
    		'NH': {fill: '#d2232a'},
    		'NJ': {fill: '#d2232a'},
    		'NM': {fill: '#d2232a'},
    		'NY': {fill: '#d2232a'},
    		'NV': {fill: '#d2232a'},
    		'OH': {fill: '#d2232a'},
    		'OK': {fill: '#d2232a'},
    		'OR': {fill: '#d2232a'},
    		'PA': {fill: '#d2232a'},
    		'RI': {fill: '#d2232a'},
    		'SC': {fill: '#d2232a'},
    		'TN': {fill: '#d2232a'},
    		'TX': {fill: '#d2232a'},
    		'VA': {fill: '#d2232a'},
    		'VT': {fill: '#d2232a'},
    		'WV': {fill: '#d2232a'}
      }, 
     
    	    
    	    'click' : function(event, data) {
    		     window.open('/wp-content/themes/midAtlantic_2_12_11/carriers/va.php','_blank','height=500, width=800, scrollbars=no, channelmode=yes, menubar=no, left=480, top=200, titlebar=no, toolbar=no, location=no status=no','false')
    	    }
    	  });
    	  
    	});
    	
    	</script>
    
    	<div id="map" style="width: 800px; height: 630px; border: solid 0px #ccc; margin:auto;"></div>
    </body>
    </html>

  3. #3
    Join Date
    May 2013
    Location
    Richmond, VA
    Posts
    3
    It explains how to do it here but i'm not able to make sense of it.

    http://newsignature.github.io/us-map/#usage-events

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles