div background color semi-transparent

i have a table that i need to have the onmouseover to be semi-transparent.

when you mouseover the div, the dic currently goes from transparent to #f2f2f2

but i want that solid color to be semi-transparent. currently is is solid and none of the bg image shows. i want the bg image to show some.

i am using this to make the div to look like it is it is getting lighter when you mouseover it

thanks
<HTML>
 <HEAD>
  <TITLE>Untitled</TITLE>
 </HEAD>
 <BODY>
  <P>
   <TABLE BACKGROUND="images/button_lime.png" WIDTH="100" CELLPADDING="0" CELLSPACING="0" BORDER="0">
    <TR>
     <TD WIDTH="100%" VALIGN=TOP>
      <DIV onMouseOver="this.style.background='#f2f2f2';" onMouseOut="this.style.background='transparent';">
       <P STYLE="border : solid #6EAF28 1.0pt;">
        <!-- $MVD$:picsz("100","100") --><IMG SRC="images/blank.png" WIDTH="45" HEIGHT="45" VSPACE="0" HSPACE="0" BORDER="0"></TD>
    </TR>
   </TABLE></P>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;
 </BODY>
</HTML>

Open in new window

webdottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
try:
<HTML>
 <HEAD>
  <TITLE>Untitled</TITLE>
  <style type="text/css">
.transparent {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
</style>

 </HEAD>
 <BODY>
  <P>
   <TABLE BACKGROUND="images/button_lime.png" WIDTH="100" CELLPADDING="0" CELLSPACING="0" BORDER="0">
    <TR>
     <TD WIDTH="100%" VALIGN=TOP>
      <DIV onMouseOver="this.style.background='#f2f2f2'; this.className=this.className.replace(' transparent','')" onMouseOut="this.className = this.className + ' transparent';">
       <P STYLE="border : solid #6EAF28 1.0pt;">
        <!-- $MVD$:picsz("100","100") --><IMG SRC="images/blank.png" WIDTH="45" HEIGHT="45" VSPACE="0" HSPACE="0" BORDER="0"></TD>
    </TR>
   </TABLE></P>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;
 </BODY>
</HTML>

Open in new window

webdottAuthor Commented:
hielo
i tried this, but it did not work.
this is what i am trying to accomplish
https://invoicebubble.com/
he has a button that says sign up. when you see it, it is green
when you mouseover it, the button turns gray
i also want to include a text link in the div, not an image link.
 
so in short i was hoping this would create:
a div button that has a bg color of green + a text link that says home
onmouseover it shows the bg as light gray
onmouseout goes back to original color green
 
thanks
hieloCommented:

<HTML>
 <HEAD>
  <TITLE>Untitled</TITLE>
  <style type="text/css">
<!--
#theDiv{background-color:#A8CF42;}
-->
</style>

 </HEAD>
 <BODY>
  <P>
   <TABLE BACKGROUND="images/button_lime.png" WIDTH="100" CELLPADDING="0" CELLSPACING="0" BORDER="0">
    <TR>
     <TD WIDTH="100%" VALIGN=TOP>
      <DIV id='theDiv' onMouseOver="this.style.backgroundColor='#f2f2f2';" onMouseOut="this.style.backgroundColor='';">
       <P STYLE="border : solid #6EAF28 1.0pt;text-align:center">
        <a href="#" style='text-decoration:none;color:black;display:block;width:100%;text-align:center;'>Home</a>
	   </p>
	 </TD>
    </TR>
   </TABLE></P>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;
 </BODY>
</HTML>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

webdottAuthor Commented:
this is one that is close to what i am wanting
<HTML>
 <HEAD>
  <TITLE>Untitled</TITLE>
 <STYLE TYPE="text/css"><!--
   .trans { background-color : #E10000;
            filter: ty=10);
             filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
   .text { font-family : "sans-serif";
           font-size : 15.0px;
           text-align : center;
           position: relative;}
   .img1 { filter: ty=8);
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);}
   -->
 </STYLE>
 <STYLE> 
 
  
  
td.over {opacity:1;filter: alpha(opacity=100); -moz-opacity: 1;} 
td {background-color: #ffffff;opacity:.10;filter: alpha(opacity=10); -moz-opacity: 0.1; } 
</STYLE>
 </HEAD>
 <BODY>
  <CENTER>
   <P ALIGN=CENTER>
    <TABLE BACKGROUND="images/button_lime.png" WIDTH="300" CELLPADDING="0" CELLSPACING="0" BORDER="0" CLASS="trans">
     <TR>
      <TD WIDTH="100%" VALIGN=TOP ONMOUSEOVER="this.className = 'over'" ONMOUSEOUT="this.className = ''">
       <P CLASS="text" ALIGN=CENTER>
        <B><FONT SIZE="5">hello</FONT></B></TD>
     </TR>
    </TABLE></P>
   </CENTER>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;
 </BODY>
</HTML>

Open in new window

hieloCommented:
on your last example, perhaps what you want is:
td.over {opacity:.93;filter: alpha(opacity=93); -moz-opacity: .93;}

(you may need to adjust the numbers as desired).
webdottAuthor Commented:
thanks hielo
 
i ended up doing the following with an image in the background insted of transparency
 
   <TABLE BACKGROUND="images/btn_blk.png" WIDTH="130" CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="height='47px'">
    <TR>
     <TD VALIGN=TOP ONMOUSEOUT="this.style.background=''" ONMOUSEOVER="this.style.background='url(images/btn_blk2.png)'">
      <P STYLE="margin-top : 0.0em;margin-bottom : 0.0em;" ALIGN=CENTER>
       <FONT FACE="Trebuchet MS"><B><FONT COLOR="WHITE">LINK</FONT></B></FONT></TD>
    </TR>
   </TABLE>
 
i am rewarding you points because you did answer and fix the issue i was trying to do originally.
 
thanks again for your help
webdottAuthor Commented:
thanks
remorinaCommented:
Hi webdot,

try the example below, I've applied your desired effect on your first example.
The only thing you need to keep in mind that the opacity will affect all the cell not just the background, that means its content, text, images will also be semitransparent.

p.s I've added a body background in the example to test if it's working properly
<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        body {background:url(http://www.public-domain-image.com/backgrounds/slides/abstract-waves-on-a-blue-background.jpg);}
        .hover {background:#f2f2f2;filter:alpha(opacity=70);-moz-opacity:0.70;opacity:0.70;}
    </style>
</head>
<body>
    <p>
        <table background="images/button_lime.png" width="100" cellpadding="0" cellspacing="0"
            border="0">
            <tr>
                <td width="100%" valign="TOP">
                    <div onmouseover="this.className='hover';" onmouseout="this.className='';">
                        <p style="border: solid #6EAF28 1.0pt;">
                            <!-- $MVD$:picsz("100","100") -->
                            <img src="images/blank.png" width="45" height="45" vspace="0" hspace="0" border="0">
                </td>
            </tr>
        </table>
    </p>
    <p>
        <!-- $MVD$:spaceretainer() -->
    &nbsp;
</body>
</html>

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.