convert rollovers to pure CSS with sprites

app/assets/stylesheets/tracks.css.scss

@@ -107,28 +107,20 @@ h3 {
 /* Rules for the icon links */
 
 img.edit_item {
-    background-image: image-url('edit_off.png');
-    background-repeat: no-repeat;
+    background: image-url('edit.png') no-repeat top;
     border: none;
 
     a:hover & {
-        background-image: image-url('edit_on.png');
-        background-color: transparent;
-        background-repeat: no-repeat;
-        border: none;
+        background-position: bottom;
     }
 }
 
 img.delete_item {
-    background-image: image-url('delete_off.png');
-    background-repeat: no-repeat;
+    background: image-url('delete.png') no-repeat top;
     border: none;
 
     a:hover & {
-        background-image: image-url('delete_on.png');
-        background-color: transparent;
-        background-repeat: no-repeat;
-        border: none;
+        background-position: bottom;
     }
 }
 
@@ -1457,10 +1449,21 @@ a.item-downarrow {
 ul.todo-submenu > li > a {
     position: relative;
     padding-left: 24px;
+    height: 16px;
 
-    > img {
-        position: absolute;
-        left: 0px;
-        top: 0px;
+    &.icon_delete_item {
+        background: image-url('delete.png') no-repeat 2px top;
+        &:hover { background-position: 2px bottom; }
+    }
+
+    @each $days in 1, 2, 3, 7 {
+        &.icon_defer_#{$days}_item {
+            background: image-url('defer_#{$days}.png') no-repeat left top;
+            &:hover { background-position: left bottom; }
+        }
+    }
+
+    &.icon_item_to_project {
+        background: image-url('to_project_off.png') no-repeat;
     }
 }

app/helpers/todos_helper.rb

@@ -16,12 +16,8 @@ module TodosHelper
   end
 
   def remote_delete_menu_item(todo)
-    # TODO: what is the current way to do mouseover with css?
     return link_to(
-      image_tag("delete_off.png",
-      :onmouseover => "this.src='#{path_to_image("delete_on.png")}'",
-      :onmouseout => "this.src='#{path_to_image("delete_off.png")}'",
-      :alt => t('todos.delete'), :align => "absmiddle")+" "+t('todos.delete'),
+      t('todos.delete'),
       {:controller => 'todos', :action => 'destroy', :id => todo.id},
       :class => "icon_delete_item",
       :id => "delete_#{dom_id(todo)}",
@@ -34,7 +30,7 @@ module TodosHelper
       :_source_view => (@source_view.underscore.gsub(/\s+/,'_') rescue "")}
     url[:_tag_name] = @tag_name if @source_view == 'tag'
 
-    options = {:x_defer_alert => false, :class => "icon_defer_item", :id => "defer_#{days}_#{dom_id(todo)}" }
+    options = {:x_defer_alert => false, :class => "icon_defer_item icon_defer_#{days}_item", :id => "defer_#{days}_#{dom_id(todo)}" }
     if todo.due
       futuredate = (todo.show_from || todo.user.date) + days.days
       if futuredate > todo.due
@@ -43,7 +39,7 @@ module TodosHelper
       end
     end
 
-    return link_to(image_tag_for_defer(days), url, options)
+    return link_to(t('todos.defer_x_days', :count => days), url, options)
   end
 
   def remote_delete_dependency(todo, predecessor)
@@ -59,15 +55,7 @@ module TodosHelper
       :_source_view => (@source_view.underscore.gsub(/\s+/,'_') rescue "")}
     url[:_tag_name] = @tag_name if @source_view == 'tag'
 
-    return link_to(image_tag("to_project_off.png", :align => "absmiddle")+" " + t('todos.convert_to_project'), url, {:id => "to_project_#{dom_id(todo)}"})
-  end
-
-  def image_tag_for_defer(days)
-    # TODO: what is the current way to do mouseover with css?
-    image_tag("defer_#{days}_off.png",
-      :onmouseover => "this.src='#{path_to_image("defer_#{days}.png")}'",
-      :onmouseout => "this.src='#{path_to_image("defer_#{days}_off.png")}'",
-      :alt => t('todos.defer_x_days', :count => days), :align => "absmiddle")+" "+t('todos.defer_x_days', :count => days)
+    return link_to(t('todos.convert_to_project'), url, {:class => "icon_item_to_project", :id => "to_project_#{dom_id(todo)}"})
   end
 
   def collapsed_notes_image(todo)

app/views/todos/_edit_form.html.erb

@@ -37,7 +37,7 @@
     <label for="<%= dom_id(@todo, 'due_label') %>"><%= Todo.human_attribute_name('due') %></label>
     <%= date_field_tag("todo[due]", dom_id(@todo, 'due'), format_date(@todo.due), "tabindex" => next_tab_index) %>
     <a href="#" id="<%= dom_id(@todo, 'due_x') %>" class="date_clear" title="<%= t('todos.clear_due_date') %>">
-      <%= image_tag("delete_off.png", :alt => "Clear due date") %>
+      <%= image_tag("blank.png", :alt => "Clear due date", :class => "delete_item") %>
     </a>
   </div>
 
@@ -45,7 +45,7 @@
     <label for="<%= dom_id(@todo, 'show_from') %>"><%= t('todos.show_from') %></label>
     <%= date_field_tag("todo[show_from]", dom_id(@todo, 'show_from'), format_date(@todo.show_from), "tabindex" => next_tab_index) %>
     <a href="#" id="<%= dom_id(@todo, 'show_from_x') %>" class="date_clear" title="<%= t('todos.clear_show_from_date') %>">
-      <%= image_tag("delete_off.png", :alt => "Clear show from date") %>
+      <%= image_tag("blank.png", :alt => "Clear show from date", :class => "delete_item") %>
     </a>
   </div>