title: Dynamic .load filepath, based from SVG path click
body: <p>So I've created a Map using SVG points, and raphael.js.</p>
  
  <p>can check it out here <a href="http://laithazzam.com/work/helpmeplz/" rel="nofollow">http://laithazzam.com/work/helpmeplz/</a></p>
  
  <p>I'm trying to load in new content to the page, based on which land mass is clicked.</p>
  
  <p>What would be the most efficient method to dynamically accomplish this?  Each SVG path has a name and url defined within the path.js file, and ideal i'd like the click to pull the id, and apply it to the .html, </p>
  
  <p><strong>For example</strong></p>
  
  <p>Clicking area 1, it loads content from area1.html into a specific div within this document.</p>
  
  <p>**I do have a click function working</p>
  
  <pre><code>.click(function(){
          location.href = paths[arr[this.id]].url;
  
         $(".video-js").animate({
                  opacity: 1
              }, 1000);
              $( "#map" ).animate({
                  opacity: 0
                  }, 2000, function() {
           $( "#map" ).css({ 
              "top" : "-610px",
              "opacity" : "1" 
           });
           $( "#map_btn" ).animate({
               opacity: "1",
               zIndex: "25"
           });
        }); 
  
          $( "#map_close_btn" ).animate({
                  opacity: "0",
                  zIndex: "20"
                  },500); 
              })
          }
      });
  </code></pre>
  
  <p>I feel like within here, I should be able to pull the id, and plug it into </p>
  
  <pre><code>$( "#content" ).load( "area1.html");
  </code></pre>
  
  <p>but how would I go about making that "area1.html" dynamically inputted based on the click?</p>
  
  <p>Thanks a bunch in advanced, let me know if you need anything else from my side!</p>