Topic: creating caption like links over images with Jquery

Part of the app I am working on is a searchable database of images. Users can add images to a bin, and then in turn print or save as a set. Everything works fine with this code now...

I am currently using Jquery to update a div that shows what images are in the current bin.

create.js.erb

$("#bin_container").html("<%= escape_javascript(render(@bin)) %>");

which updates the bin when

<% @images.each do |image| %>

    <%= link_to (image_tag image.stimuli_url(:thumb).to_s, :class => "one_wrap"), image %>    
        
    <%= link_to 'Add to bin', line_items_path(:image_id => image), :remote => true %>    

<% end %> 

So in my view I have a whole bunch of image thumbnails displayed with a link below each one. I was looking for a solution to only have the link appear over the image to add on .hover or mouseover.

Should I even do this with Jquery? Or should this be a css thing with display:none?

In my attempts to do this I had it where hovering over an image would produce the link...but only over the first image. Do I need to pass a unique id for each div?

any help or link to any help would be greatly appreciated!

Re: creating caption like links over images with Jquery

Well...found qTip which is a Javascript tooltip plugin.
Here is a link to the page.
http://craigsworks.com/projects/qtip/de … tion/fixed

So with this code taken from the sample...

<script type="text/javascript">
// Only create tooltips when document is ready
$(document).ready(function()
{
   // Use the each() method to gain access to each of the elements attributes
   $('#content img').each(function()
   {
      $(this).qtip(
      {
         content: '<a href="#">Edit</a> | <a href="#">Delete</a>', // Give it some content
         position: 'topRight', // Set its position
         hide: {
            fixed: true // Make it fixed so it can be hovered over
         },
         style: {
            padding: '5px 15px', // Give it some extra padding
            name: 'dark' // And style it with the preset dark theme
         }
      });
   });
});
</script>

Do I assign each image a unique div based on it's id?

<div id="image_<%= image.id %>">