Added :mouseover short-cut to AssetTagHelper#image_tag for doing easy…

… image swaps (closes #6893) [joost]

git-svn-id: http://svn-commit.rubyonrails.org/rails/trunk@8110 5ecf4fe2-1ee6-0310-87b1-e25e094e27de

actionpack/CHANGELOG

@@ -1,5 +1,7 @@
 *SVN*
 
+* Added :mouseover short-cut to AssetTagHelper#image_tag for doing easy image swaps #6893 [joost]
+
 * Fixed handling of non-domain hosts #9479 [purp]
 
 * Fix syntax error in documentation example for cycle method. Closes #8735 [foca]

actionpack/lib/action_view/helpers/asset_tag_helper.rb

@@ -335,13 +335,16 @@ def image_path(source)
       #
       # ==== Options
       # You can add HTML attributes using the +options+. The +options+ supports
-      # two additional keys for convienence and conformance:
+      # three additional keys for convienence and conformance:
       #
       # * <tt>:alt</tt>  - If no alt text is given, the file name part of the
       #   +source+ is used (capitalized and without the extension)
       # * <tt>:size</tt> - Supplied as "{Width}x{Height}", so "30x45" becomes
       #   width="30" and height="45". <tt>:size</tt> will be ignored if the
       #   value is not in the correct format.
+      # * <tt>:mouseover</tt> - Set an alternate image to be used when the onmouseover
+      #   event is fired, and sets the original image to be replaced onmouseout.
+      #   This can be used to implement an easy image toggle that fires on onmouseover.
       #
       # ==== Examples
       #  image_tag("icon")  # =>
@@ -356,15 +359,23 @@ def image_path(source)
       #    <img alt="Icon" height="32" src="/icons/icon.gif" width="32" />
       #  image_tag("/icons/icon.gif", :class => "menu_icon") # =>
       #    <img alt="Icon" class="menu_icon" src="/icons/icon.gif" />
+      #  image_tag("mouse.png", :mouseover => "/images/mouse_over.png") # => 
+      #    <img src="/images/mouse.png" onmouseover="this.src='/images/mouse_over.png'" onmouseout="this.src='/images/mouse.png'" alt="Mouse" />
+      #  image_tag("mouse.png", :mouseover => image_path("mouse_over.png")) # => 
+      #    <img src="/images/mouse.png" onmouseover="this.src='/images/mouse_over.png'" onmouseout="this.src='/images/mouse.png'" alt="Mouse" />
       def image_tag(source, options = {})
         options.symbolize_keys!
 
         options[:src] = path_to_image(source)
         options[:alt] ||= File.basename(options[:src], '.*').split('.').first.capitalize
 
-        if options[:size]
-          options[:width], options[:height] = options[:size].split("x") if options[:size] =~ %r{^\d+x\d+$}
-          options.delete(:size)
+        if size = options.delete(:size)
+          options[:width], options[:height] = size.split("x") if size =~ %r{^\d+x\d+$}
+        end
+
+        if mouseover = options.delete(:mouseover)
+          options[:onmouseover]	= "this.src='#{image_path(mouseover)}'"
+          options[:onmouseout]	= "this.src='#{image_path(options[:src])}'"
         end
 
         tag("img", options)

actionpack/test/template/asset_tag_helper_test.rb

@@ -135,7 +135,10 @@ def teardown
     %(image_tag("error.png", "size" => "45")) => %(<img alt="Error" src="/images/error.png" />),
     %(image_tag("error.png", "size" => "45 x 70")) => %(<img alt="Error" src="/images/error.png" />),
     %(image_tag("error.png", "size" => "x")) => %(<img alt="Error" src="/images/error.png" />),
-    %(image_tag("http://www.rubyonrails.com/images/rails.png")) => %(<img alt="Rails" src="http://www.rubyonrails.com/images/rails.png" />)
+    %(image_tag("http://www.rubyonrails.com/images/rails.png")) => %(<img alt="Rails" src="http://www.rubyonrails.com/images/rails.png" />),
+    %(image_tag("http://www.rubyonrails.com/images/rails.png")) => %(<img alt="Rails" src="http://www.rubyonrails.com/images/rails.png" />),
+    %(image_tag("mouse.png", :mouseover => "/images/mouse_over.png")) => %(<img alt="Mouse" onmouseover="this.src='/images/mouse_over.png'" onmouseout="this.src='/images/mouse.png'" src="/images/mouse.png" />),
+    %(image_tag("mouse.png", :mouseover => image_path("mouse_over.png"))) => %(<img alt="Mouse" onmouseover="this.src='/images/mouse_over.png'" onmouseout="this.src='/images/mouse.png'" src="/images/mouse.png" />)
   }