title: Assign map (coordinates) to modal
body: <p>I'm looking for a way to assign a map (a clickable area) to a modal, so that it works like a button. I enclose my code. As you can see I have a picture with a map that I would like to link to the modal further down... there is also a button linked to the modal and that works properly. I hope you see what I mean. </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;a href="http://s621.photobucket.com/user/viktorvnh/media/deskone_zpswpfj5mrc.jpg.html" target="_blank"&gt;&lt;img src="http://i621.photobucket.com/albums/tt296/viktorvnh/deskone_zpswpfj5mrc.jpg" alt=" photo deskone_zpswpfj5mrc.jpg" usemap="#Map" border="0"/&gt;
  &lt;map name="Map" id="Map"&gt;
    &lt;area shape="rect" coords="374,414,624,570" href="#" /&gt;
  &lt;/map&gt;
  &lt;/a&gt;
  
  &lt;!-- Button trigger modal --&gt;
  &lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
    Launch demo modal
  &lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Det här är innehållet&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          DET HÄR ÄR OCKSÅ INNEHÅLLET&lt;a href="http://s621.photobucket.com/user/viktorvnh/media/deskone_zpswpfj5mrc.jpg.html" target="_blank"&gt;&lt;img src="http://i621.photobucket.com/albums/tt296/viktorvnh/deskone_zpswpfj5mrc.jpg" alt=" photo deskone_zpswpfj5mrc.jpg" width="540" height="358" border="0"/&gt;
  &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>