Topic: Toggle images in-place

So here I go again,

I have 2 images: A.1) flag_off, A.2) flag.on

I would like to do the following:

In a view, initially display the A.1 image, enclosed in <a> tag. When clicked it will fade out (using visual_effect(:fade)) and the A.2 image will appear (using visual_effect(:appear)).

Seems simple; but I can't wrap my head around it. I would also like the the bit of functionality to work in the reverse order too (that is A.2 fades, A.1 appears.)

What is the easiest way of doing this using the RJS?

cheers,
insha

Re: Toggle images in-place

You're looking for effect queues.
http://wiki.script.aculo.us/scriptaculo … fectQueues

The following should work. Of course, you should factor out the CSS.

<div style="height: 100px">
  <% first_image  = image_tag('pdf_icon.png', :style => 'border: none; width: 100px', :id => 'first_image') %>
  <% second_image = image_tag('rss_icon.png', :style => 'border: none; width: 100px; display: none', :id => 'second_image') %>
 
  <%= link_to_function first_image,  "flip_image($('first_image'), $('second_image'))" %>
  <%= link_to_function second_image, "flip_image($('second_image'), $('first_image'))" %>
</div>

You'll need this function somewhere, such as public/javascripts/application.js:

function flip_image(fading, appearing) {
  fading.visualEffect('fade');
    appearing.visualEffect('appear', {queue: 'end'});
}

Vincent Woo Ruby on Rails Blog