asked on

change background onmouseover to white from transparent on link

i want to create a link bar like the one on this website:
http://martinstar.com/

when you mouesover the link [ which is transparent to the background ]
the background of that link is white with no transparency.
I do not want the text to change change in transparency which is what i have in the code
that i have come up with.

thanks

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
<STYLE>
 
 
div.transON {width: 100%; background-color: #ffffff;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5; }
div.transOFF {width: 100%; background-color: #ffffff;}
 
 
</STYLE>
</HEAD>
<BODY>
<TD BACKGROUND="images/hdr_bg2.png" WIDTH="20%" VALIGN=TOP ONMOUSEOVER="this.className='transON">
<DIV class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'">
<P></P>
<P ALIGN=CENTER>
<B><FONT COLOR="BLACK">test2</FONT></B></TD>
</BODY>
</HTML>

Open in new window

SOLUTION

coolersport

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Lakio

Pure HTML/CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Menu demo</title>
<style type="text/css">
	* { padding:0; margin:0; }
 
	#Head { padding:35px 0 0 35px; background:url(http://www.quietmindcafe.com/nature_banner_5.jpg) }
	#Head ul { overflow:hidden; list-style:none; width:100%; }
	#Head ul * { float:left; }
	#Head ul li a { padding:10px; }
	#Head ul li a:hover { background:#FFF; }
 
	#Body { margin-top:20px; padding:0 20px; }
	#Body p { padding:5px 0; }
 
	#Footer { padding:20px; }
</style>
</head>
<body>
<div id="wrapper">
	<div id="Head">
		<ul>
			<li><a href="#">Menu Link</a></li>
			<li><a href="#">Menu Link</a></li>
			<li><a href="#">Menu Link</a></li>
			<li><a href="#">Menu Link</a></li>
			<li><a href="#">Menu Link</a></li>
		</ul>
	</div>
	<div id="Body">
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper porttitor purus eu suscipit. Praesent vehicula neque vitae nunc faucibus posuere. Duis vitae lorem urna. Vivamus sollicitudin lacinia nunc, eu lobortis elit lobortis non. Sed a libero mauris. In hac habitasse platea dictumst. Maecenas et erat sem, non aliquet ante. Aenean in orci ut sem imperdiet fringilla ut in sapien. Aenean accumsan dictum dolor nec lacinia. Nulla facilisi. Ut pulvinar posuere arcu vel eleifend.
</p> 
<p> 
Pellentesque a magna id massa pharetra egestas. Proin lectus ipsum, vulputate vel condimentum sit amet, suscipit et tellus. Nunc ultrices egestas arcu ut laoreet. Aenean orci massa, commodo ut facilisis ac, gravida eget diam. Aenean rhoncus turpis eget nibh auctor tincidunt. Pellentesque at pharetra nulla. Mauris adipiscing posuere libero ut varius. Sed fringilla porta nisi, eget mattis enim semper ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac magna sed sapien pharetra fermentum fermentum sed tellus. Quisque varius sollicitudin nisl sit amet vehicula.
</p> 
<p> 
Phasellus vel lorem mi, eu ultricies dolor. Nunc bibendum mollis venenatis. Quisque vitae viverra dui. Nunc sem tortor, fermentum ac ultricies in, laoreet ac turpis. Sed suscipit ligula eget turpis bibendum vitae posuere arcu luctus. Fusce non sapien a eros viverra mattis. Quisque luctus nulla lacus, et egestas lectus. Donec rhoncus leo id lacus egestas rhoncus. Suspendisse luctus purus malesuada erat congue luctus. Maecenas ornare fringilla mi et ultrices. Ut elementum, quam eu iaculis eleifend, lectus ante fringilla tellus, id aliquet mauris quam nec nunc.
</p> 
<p> 
Nullam tincidunt tellus nec augue lobortis adipiscing. Ut erat augue, tincidunt sed pretium et, blandit sit amet justo. Pellentesque ut nunc eu enim tincidunt consequat eu non justo. Praesent purus nisl, ultrices sit amet sagittis in, cursus eget est. Vivamus malesuada mauris in orci commodo at posuere arcu euismod. Nam non mi nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent elit ante, elementum eget tincidunt in, vehicula non tellus. Donec venenatis nulla ut mauris tincidunt gravida. Suspendisse potenti. Cras est lorem, bibendum vel tincidunt at, accumsan a ante. Aliquam id tellus libero. Sed vestibulum, augue ac lobortis laoreet, nisi felis vulputate turpis, ac bibendum eros libero dapibus turpis. Proin consectetur consequat nunc, ut sagittis elit pharetra et. Vivamus tempor venenatis varius. Donec ac mollis metus. Nulla ullamcorper eros auctor nulla aliquet molestie.
</p> 
<p> 
Duis id ligula sed mi sodales feugiat nec eget lectus. Ut nibh augue, gravida at viverra eu, sodales quis erat. Phasellus elit risus, iaculis a ultricies ac, lobortis a mauris. Aenean ac risus nisi. Aliquam lobortis fringilla lectus quis sodales. Proin viverra risus sit amet eros condimentum faucibus. Fusce fringilla, ipsum et blandit sodales, velit nunc lacinia purus, sed fermentum ligula arcu id sem. Vestibulum ullamcorper arcu in purus volutpat facilisis. Donec massa tellus, rutrum non dignissim in, euismod sed tellus. Vivamus ut dolor turpis. Nam vestibulum pellentesque tortor eu laoreet. In id quam sit amet nulla accumsan gravida gravida eu arcu. Sed ultricies pharetra enim, nec facilisis dolor fermentum eget. Curabitur arcu erat, luctus vel auctor eu, auctor dignissim metus. Cras ullamcorper neque et nulla sagittis at mollis magna varius. Fusce est elit, pretium vitae euismod vitae, pretium vel erat.
</p>
	</div>
	<div id="Footer">
		<address>Next to guy next to me</address>
	</div>	
</div>
</body>
</html>

Open in new window

webdott

ASKER

Coolersport,
this works great except the TEXT in the cell is also transparent making it it hard to see.
Any way of making the text not transparent or opac?

thanks

ASKER CERTIFIED SOLUTION

coolersport

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

webdott

ASKER

the last one is not working at all?
am i supposed to add the td code from before?
<STYLE>
td.over {opacity:1;filter: alpha(opacity=100); -moz-opacity: 1;}
td {background-color: #ffffff;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5; }
</STYLE>

webdott

ASKER

i came up with this:
it works how i want it with the exception of the cell background that is #e10000
will not turn solid white #ffffff when moused over? it is still semi-transparent

<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 : 14.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>
  <P>
   <TABLE BACKGROUND="images/img1.png" WIDTH="600" CELLPADDING="2" CELLSPACING="0" BORDER="0">
    <TR>
     <TD WIDTH="33%" VALIGN=TOP>
      <CENTER>
       <P ALIGN=CENTER>
        <TABLE 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>
    </TR>
   </TABLE>
 </BODY>
</HTML>

Open in new window

coolersport

I have uploaded the same code above at http://coolersport.info/test.html. You can test it out. No, you do not need the old css (td.over and td) anymore.

coolersport

BTW, it is tested in Firefox, IE6 & 7, Safari. Works as you desired :D

webdott

ASKER

thanks