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

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>



  
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


  
<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>




  
1

2

3

4

5

6

7

8

9

10

11

12



  
<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



  
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









        

          
        

      
    
  
	

		
  	

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

		

			Read full article
			3 comments
		

		
		

	





  
    
Comments

  
  
  

    
    
      
  1. 
  
    
    
    meg
    4 days later:
  
    
    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. 


  2. 
  
    
    
    meg
    9 days later:
  
    
    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. 


  3. 
  
    
    
    Daniel
    9 days later:
  
    
    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.  
  
    4.