title: Jquery rollover issue no show me images right
body: <p>**I create these 2 codes the first code no works , show rollover bad , when for example i put over the first icon mouse over show me other icon no the first icon over , for example icon_1 and mouse over icon_1_down show me for example icon_5_down **</p>
  
  <pre><code>&lt;script&gt; 
  $(function() {
      var number_menus = 9;
      for (i = 1; i &lt;= number_menus; i++) {
          var p1 = +i;
          $(".wm_" + i).show().css("background-image", "url(imagenes/footer/m/" + i + ".png)");
          $(".wm_" + i).mouseover(function() {
              $(this).css("background-image", "url(imagenes/footer/m/" + i + "_down.png)");
              alert("this_down.png");
          });
          $(".wm_" + i).mouseout(function() {
              $(this).css("background-image", "url(imagenes/footer/m/" + i + ".png)");
          });
      }
  });​
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code> &lt;div id="web_footer_publi"&gt;
   &lt;div id="web_footer_marks" class="wm_1"&gt;&lt;/div&gt; &lt;div
   id="web_footer_marks" class="wm_2"&gt;&lt;/div&gt; &lt;div id="web_footer_marks"
   class="wm_3"&gt;&lt;/div&gt; &lt;div id="web_footer_marks" class="wm_4"&gt;&lt;/div&gt;
   &lt;div id="web_footer_marks" class="wm_5"&gt;&lt;/div&gt; &lt;div
   id="web_footer_marks" class="wm_6"&gt;&lt;/div&gt; &lt;div id="web_footer_marks"
   class="wm_7"&gt;&lt;/div&gt; &lt;div id="web_footer_marks" class="wm_8"&gt;&lt;/div&gt;
   &lt;div id="web_footer_marks" class="wm_9"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>My second code works but when i go over the icons - when show these - have delay for show , more or less one second for show the icon over</strong> </p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      for (i = 1; i &lt;= 9; i++) {
          $(".wm_" + i).show(1000).css("background-image", "url(imagenes/footer/m/" + i + ".png)");
      }
  });
  function footer(id) {
      $(function() {
          $(".wm_" + id).hover(function() {
              $(this).show().css("background-image", "url(imagenes/footer/m/" + id + "_down.png)");
          });
          $(".wm_" + id).mouseout(function() {
              $(this).css("background-image", "url(imagenes/footer/m/" + id + ".png)");
          });
      });
  }​
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div id="web_footer_publi"&gt;
   &lt;div id="web_footer_marks" class="wm_1"
   Onmouseover="javascript:footer('1')"&gt;&lt;/div&gt; &lt;div id="web_footer_marks"
   class="wm_2" Onmouseover="javascript:footer('2')"&gt;&lt;/div&gt; &lt;div
   id="web_footer_marks" class="wm_3"
   Onmouseover="javascript:footer('3')"&gt;&lt;/div&gt; &lt;div id="web_footer_marks"
   class="wm_4" Onmouseover="javascript:footer('4')"&gt;&lt;/div&gt; &lt;div
   id="web_footer_marks" class="wm_5"
   Onmouseover="javascript:footer('5')"&gt;&lt;/div&gt; &lt;div id="web_footer_marks"
   class="wm_6" Onmouseover="javascript:footer('6')"&gt;&lt;/div&gt; &lt;div
   id="web_footer_marks" class="wm_7"
   Onmouseover="javascript:footer('7')"&gt;&lt;/div&gt; &lt;div id="web_footer_marks"
   class="wm_8" Onmouseover="javascript:footer('8')"&gt;&lt;/div&gt; &lt;div
   id="web_footer_marks" class="wm_9"
   Onmouseover="javascript:footer('9')"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>