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

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

0

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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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

0
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).
0
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
0
webdottAuthor Commented:
thanks
0
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

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

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.