I would like to know how to put a "change image" layer like in facebook on a mouseover event
<p>Hello:
I have a photo gallery I would like that every time a user does mouseover the image, there is a button on the top of this image that appears. The user can click on it.
But every time that the user mouse out of the photo it must disappear.</p>

<p>It works like the "change photo" in Facebook, with the photo of your profile.</p>

<p><img src="http://www.freeimagehosting.net/uploads/7f584370dc.gif" alt="alt text"></p>

<p>The problem I am having is that when I try to get over the button that appears (in my code is a link), it disappear because javascript understands that the mouse is just out of the image, even if this button/link is over the image.</p>

<p>The image that I use is positioned absolutely over the image.</p>

<p>This is my code, where you can see that I create a dom element that I append on the link of the image and then when there is a mouseout, I remove it.</p>

<blockquote>
  <p>$('a.ftelement').mouseover(function()
  {</p>

<pre><code>              var fav = $('&lt;a&gt;&lt;/a&gt;');         
              fav.attr("class","imgfavorito");    
  fav.attr("id","fav"+$J(this).attr("id")).html("&lt;img src=\"/im/favorito.gif\"/&gt;");   
              fav.appendTo(this);              });
</code></pre>
  
  <p>$('a.ftelement').mouseout(function()
  {</p>
  
  <p>$("a.imgfavorito").remove()      });</p>
</blockquote>

<p>The result is this graphically (http://www.freeimagehosting.net/uploads/41fbac8994.gif):</p>

<p><img src="http://www.freeimagehosting.net/uploads/41fbac8994.gif" alt="alt text"></p>
