Overlay div "edit image" on a div, td element

Question

I have either a div element, or td element in a table that is editable, i.e. you click the element and popup lets you edit the text. I would like to be able to add an "edit image" in the top left hand corner of the editable element. At the moment, all I have is when you rollover the element, the background changes to yellow to indicate. Would like the image to popup which is nicer. Tried using an absolute div, but not sure if I have the style settings correct as it does not work correctly.

<td>
   <div style="position:absolute; display:inline"><img src="/edit.png"/></div>
   <p>This would be the normal text that is editable</p>
</td>

I would be adding the div using jQuery on rollover with a prepend.

Answer 1

Put your 'edit image' after the content so it will appear above the actual content (elements that come later in the source have a higher z-index:

The HTML

<td>
   <div class="editable">
      <p>This would be the normal text that is editable</p>
      <img class="editimg" src="/edit.png"/>
   </div>
</td>

The CSS

div.editable {
   width:100%;
   position:relative; /* this allows the img to be positioned relative to the div */
}
div.editable img.editimg {
   position:absolute;
   top:5px;
   right:5px;
}

Answer 2

Since you are already using jQuery, this might be what you are looking for:

$(function(){
    $("td p").hover(function(){
      $(this).prepend("<img src='/edit.png' />");
    },function(){
      $(this).find("img:first").remove();
    });
});

This is assuming that every TD with a P is editable. However, you may want to add a class to improve the performance of the selector and use something like $("td.editable p")