CSS Transparent Rollovers 3

Posted by Daniel Wanja Mon, 10 Apr 2006 20:31:00 GMT

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

The css
1
2
3
4
5
6

<style type="text/css">
<!--
div.transOFF {width: 100%; background-color: silver; border:1px solid black;}
div.transON  {width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5; }
-->
</style>
The rhtml template
1
2
3
4
5
6
7
8
9
10
11
12
13

<table width="200" border="0" style="border:1px solid black;">
  <tr>
    <td>Project</td>
    <td>Dashboard</td>
    <td>Charts</td>
  </tr>
  <tr>
    <td><%= rollover_image('/images/index/project_icon.png', true) %></td> 
    <td><%= rollover_image('/images/index/dashboard_icon.png') %></td> 
    <td><%= rollover_image('/images/index/graph_icon.png') %></td> 
  </tr>
</table>
The Helper
1
2
3
4
5
6
7
8

  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
Project_icon
Dashboard_icon
Graph_icon
Comments

Leave a response

  1. meg Fri, 14 Apr 2006 13:02:39 GMT
    Wow. I like your code display. Haven't looked at your style sheet yet, hope I remember your place...gotta go (at work on break) later, meg
  2. meg Wed, 19 Apr 2006 22:45:45 GMT
    So did you run the code through a generator that created the color codes or is it raw HTML and CSS? Curious because if I can't find where it's readily available I am going to write a program to color code the code display but don't want to reinvent the wheel. It must be somewhere...do you know?????
  3. Daniel Thu, 20 Apr 2006 06:06:24 GMT
    I guess your a speaking about the graphs color. Yes, it's kindof a graph generator, it's call Gruff. You can find more info at http://nubyonrails.com/pages/gruff. However, if you need a color selector then that's not really what is meant for. There maybe some javascript style color wheels/palette selectors out there.
Comments