editable image overlay

a link that overlays your image

Do you like the way facebook positions their avatar edit links?

I wrote a quick JQuery utility to do something similar.

Mouse over the image to view a clickable link in the top right corner

Example Code

<div class="editable_avatar top-right">
  <a href="#" class="hidden">Edit</a>
  <img src="images/schneider.jpg" alt="schneider" height="200" />
</div>

$(document).ready(function(){
  $(".editable_avatar").editable_image_overlay();
  $(".editable_avatar a").click(function(e){
    e.preventDefault();
    alert("Editing...");
  });
});
      

You'll need the JQuery Library (1.3.2 or greater) as well as the css and javascript plugin

Instructions for use

1. Download and unzip the files
2. Install JQuery
3. Once you have your .css and .js files where you want them, Place something similar to the following code in your html

   <script src="javascripts/jquery.editable_image_overlay.js" type="text/javascript">
   </script>
   <link rel="stylesheet" href="stylesheets/editable_image_overlay.css" 
     type="text/css" media="screen" title="no title" charset="utf-8" />
             

4. Use the plugin as demonstrated above