title: Javascript not working in Joomla article
body: <p>I'm trying to implement this (dannyvankooten dot com/jquery-plugins/mapz/) image panning script into a Joomla article. I tested it outside Joomla (<a href="http://tylypahka.tk/karttatesting/" rel="nofollow">http://tylypahka.tk/karttatesting/</a>) and it's working perfectly. However, when I tried it inside a Joomla article, the panning doesn't work (<a href="http://tylypahka.tk/kartta" rel="nofollow">http://tylypahka.tk/kartta</a>).</p>
  
  <p>I put the same exact code into Joomla template's head that I had on the test version:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="https://jquery-ui.googlecode.com/svn-history/r2596/branches/dev/spinner/external/mousewheel/jquery.mousewheel.min.js" type="text/javascript" &gt;&lt;/script&gt;
  &lt;script src="http://tylypahka.tk/js/jquery.mapz.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://tylypahka.tk/js/jquery.maphilight.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
    $("#map").mapz({
      zoom : true,
      createmaps : true,
      mousewheel : true
    });
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;$(function() {
          $('.map').maphilight();
          $('#squidheadlink').mouseover(function(e) {
              $('#squidhead').mouseover();
          }).mouseout(function(e) {
              $('#squidhead').mouseout();
          }).click(function(e) { e.preventDefault(); });
      });&lt;/script&gt;
  &lt;style&gt;
  .map-viewport{ position:relative; width:860px; height:883px; overflow:hidden; background-color:black;}
  .level{ position:absolute; left:0; top:0; z-index:10;}
  .current-level{ z-index:20; }
  #map{ width:1297px; height:883px; position:absolute; left:0; top:0; cursor:move;}
  &lt;/style&gt;
  </code></pre>
  
  <p>And the same exact code to the article:</p>
  
  <pre><code>&lt;div class="map-viewport"&gt;
    &lt;div id="map"&gt;
      &lt;img src="http://img42.imageshack.us/img42/8954/tylypahkanportit.png" width="1297" height="883" usemap="#html-map" class="current-level level map" /&gt;
    &lt;/div&gt;
    &lt;map name="html-map"&gt;
      &lt;area id="squidhead" shape="rect" coords="311,494,434,634" href="http://www.image-maps.com/" alt="" title=""/&gt;
    &lt;/map&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery automatically loads in Joomla site so it shouldn't be the problem. Any ideas what I'm doing wrong here?</p>
  
  <p>All suggestions and help will be much appreciated!</p>