CSS Transparent Rollovers

I was trying to implement some rollover effects when I stumbled over this article at mandarindesign. I wrapped this functionality in the helper here after

Project	Dashboard	Charts
<%= rollover_image(‘/images/index/project_icon.png’, true) %>	<%= rollover_image(‘/images/index/dashboard_icon.png’) %>	<%= rollover_image(‘/images/index/graph_icon.png’) %>

def rollover_image(src, over=false) transON, transOFF = over ? [‘transOFF’, ‘transON’] : [‘transON’, ‘transOFF’] content_tag “div”, image_tag(src, :onmouseover => “this.className=‘#{transOFF}’”, :onmouseout => “this.className=‘#{transON}’” ), :class => transON, :onmouseover => “this.className=‘#{transOFF}’”, :onmouseout => “this.className=‘#{transON}’” end

Project	Dashboard	Charts

CSS Transparent Rollovers

Related Posts