Overlay div "edit image" on div element, td
I have either a div element or a td element in an editable table i.e. you click the element and the popup allows you to edit the text. I would like to be able to add "edit image" in the upper left corner of the editable element. At the moment, all I have is when you roll over the element, the background changes to yellow to indicate. You will love the popup image which is better. Tried using an absolute div but not sure if the style settings are 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 add a div using jQuery on rollover with add.
a source to share
Place your "editable image" after the content so that it appears above the actual content (items that appear later in the source have a higher z-index:
Html
<td>
<div class="editable">
<p>This would be the normal text that is editable</p>
<img class="editimg" src="/edit.png"/>
</div>
</td>
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;
}
a source to share
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 assumes that every TD with P can be edited. However, you can add a class to improve the performance of the selector and use something like$("td.editable p")
a source to share