Ruby on Rails | Screencasts | Download | Documentation | Weblog | Community | Source

Ticket #6893 (closed enhancement: fixed)

Opened 4 years ago

Last modified 3 years ago

[PATCH] mouseover/out for image_tag

Reported by: joost Assigned to: core
Priority: normal Milestone: 1.2.6
Component: ActionPack Version: edge
Severity: normal Keywords: verified image_tag docs tiny
Cc: rsanheim, demisone

Description

Patch adds the option :mouseover to image_tag which sets the :onmouseover and :onmouseout options accordingly.

Attachments

image_mouseover.diff (1.6 kB) - added by joost on 12/27/06 16:46:56.
image_mouseover_with_docs.diff (3.7 kB) - added by rsanheim on 01/13/07 07:18:59.
revised patch with examples/docs/tests
image_mouseover_docs_image_path.diff (3.7 kB) - added by joost on 10/19/07 14:30:44.
Up to date patch including David's suggestion

Change History

12/27/06 16:46:56 changed by joost

  • attachment image_mouseover.diff added.

01/12/07 12:14:27 changed by dcmanges

  • status changed from new to closed.
  • resolution set to undocumented.
  • milestone changed from 1.2 to 1.x.

This is definitely a helpful patch. I'm not sure if it should be applied to trunk, but if it is going to be it needs documentation.

A better implementation is probably to make a helper to make the JS tags and then use: (if the helper is named 'toggle_image')

image_tag("mouse.png", {}, toggle_image(image_path("mouseover.png")))

01/12/07 12:16:14 changed by dcmanges

That should have been:

image_tag("mouse.png", toggle_image(image_path("mouseover.png")))

01/13/07 04:18:31 changed by nik.wakelin

I sometimes use something like this:

  def image_rollover_tag(source, source_rollover, options = {})
      normal_image     = image_path(source) 
      rollover_image   = image_path(source_rollover)      
      image_tag(source, options.merge(:onmouseover => swap_image_to(rollover_image), :onmouseout => swap_image_to(normal_image)))
  end
  
  def swap_image_to(path)
    "this.src='#{path}'"
  end

A JS helper that generates the options for image_tag (like dcmanges suggests) might be cool too. Something like :

 def toggle_image(image1, image2)
   { :onmouseover => "this.src='#{image_path(image2)}'", 
     :onmouseout => "this.src='#{image_path(image1)}'" }
 end

01/13/07 07:16:10 changed by rsanheim

  • cc set to rsanheim.

01/13/07 07:18:31 changed by rsanheim

  • keywords changed from image_tag to image_tag docs tiny has_tests.
  • status changed from closed to reopened.
  • resolution deleted.

Im attaching an updated patch that includes docs with some examples, and an additional test case.

01/13/07 07:18:59 changed by rsanheim

  • attachment image_mouseover_with_docs.diff added.

revised patch with examples/docs/tests

01/15/07 07:06:19 changed by rsanheim

  • milestone changed from 1.x to 1.2.

05/10/07 21:26:51 changed by demisone

  • cc changed from rsanheim to rsanheim, demisone.

06/09/07 01:23:40 changed by josh

  • keywords changed from image_tag docs tiny has_tests to image_tag docs tiny.

09/21/07 23:40:05 changed by joost

To all people attached to this ticket, is is possible to get a +1? The revised patch has docs, tests and works great, so this can become Verified real quick. Thanks.

09/22/07 23:27:58 changed by david

The mouseover img path should be passed through image_path as well.

10/19/07 14:29:43 changed by joost

Did just that. I have reapplied the patch to current trunk. Tests all pass.

10/19/07 14:30:44 changed by joost

  • attachment image_mouseover_docs_image_path.diff added.

Up to date patch including David's suggestion

10/19/07 14:31:34 changed by joost

  • keywords changed from image_tag docs tiny to verified image_tag docs tiny.

10/27/07 20:41:24 changed by bitsweat

This seems like a clear fit for a plugin. What's the case for inclusion in core?

10/27/07 21:14:01 changed by joost

In my opinion it's too tiny for a plugin, and it is a helpful helper for a common use of images. I see it as on par with the :size attribute. Nessesary? No. Helpful? Yes.

It decreases the amount of code if one wants to show onmouseover images. It does this in a way that is usable by 100% of the audience: the onmouseover and onmouseout attributes are standard. It decreases the amount of per-application helper methods, too, and does it in a properly tested and well-documented fashion.

11/07/07 15:37:10 changed by david

  • status changed from reopened to closed.
  • resolution set to fixed.

(In [8110]) Added :mouseover short-cut to AssetTagHelper#image_tag for doing easy image swaps (closes #6893) [joost]