4thorder(TM) - Code Snippets and Full Scripts

Opacity of elements

Question:

I want to make less intensive color of images after click it by JavaScript (not change image), ex: <IMG src="image1.gif" onclick='MakeLessColor(); '>
Can you give me the solutions for this?

Answer:

I believe you are asking to change the opacity of the image. Here is something I made up to show you how to change opacity.

(tested in Netscape, Firefox, and IE - could work in others as well with small amount of code addition)

DEMO HERE

Code:

<HTML>
<HEAD>
<TITLE>Set Transparency</TITLE>
<SCRIPT>
function SetTransparency(TValue)
{
if (document.getElementById('BeeImage').filters)
document.getElementById('BeeImage').filters.alpha.opacity=TValue
else if (document.getElementById('BeeImage').style.MozOpacity)
var TValue=TValue/100
document.getElementById('BeeImage').style.MozOpacity=TValue
}
</SCRIPT>
<STYLE>
td.headeryellow {background: #FFFFE6; border:1px solid #000000; text-align:center; color:#395066; font-family:Tahoma }
td.out	   { cursor: pointer; color: #50708F; background-color: #DADDE0; border: 1px solid #000000; font-family:Tahoma }
td.headerwhite  {background: #FFF; border:1px solid #000000; text-align:center; color:#395066; font-family:Tahoma }
td.over	 { cursor: pointer; color: #FFFFFF; background-color: #435A6F; border-style:inset; border-width:1px; font-family:Tahoma }
</STYLE>

</HEAD>
<BODY>
<DIV id="BeeImage" style="filter:alpha(opacity=100); -moz-opacity: 1; position: absolute; z-index: 1; left:108px; top:63px">
<IMG border="0" src="bee.jpg" width="200" height="166">
</DIV>
<TABLE id="TransBar" border="0" width="60" cellspacing="2" cellpadding="2">
 <TR>
  <TD align="center" rowspan="11" class="headerwhite">
  S<BR>e<BR>t<BR><BR>O<BR>p<BR>a<BR>c<BR>i<BR>t<BR>y<BR>&nbsp;</TD>
 </TR>
 <TR><TD onClick="SetTransparency(10)" class="headeryellow" onMouseover="className='over'" onMouseout="className='headeryellow'" align="center">10</TD></TR>
 <TR><TD onClick="SetTransparency(20)" class="headeryellow" onMouseover="className='over'" onMouseout="className='headeryellow'" align="center">20</TD></TR>
 <TR><TD onClick="SetTransparency(30)" class="headeryellow" onMouseover="className='over'" onMouseout="className='headeryellow'" align="center">30</TD></TR>
 <TR><TD onClick="SetTransparency(40)" class="headeryellow" onMouseover="className='over'" onMouseout="className='headeryellow'" align="center">40</TD></TR>
 <TR><TD onClick="SetTransparency(50)" class="headeryellow" onMouseover="className='over'" onMouseout="className='headeryellow'" align="center">50</TD></TR>
 <TR><TD onClick="SetTransparency(60)" class="headeryellow" onMouseover="className='over'" onMouseout="className='headeryellow'" align="center">60</TD></TR>
 <TR><TD onClick="SetTransparency(70)" class="headeryellow" onMouseover="className='over'" onMouseout="className='headeryellow'" align="center">70</TD></TR>
 <TR><TD onClick="SetTransparency(80)" class="headeryellow" onMouseover="className='over'" onMouseout="className='headeryellow'" align="center">80</TD></TR>
 <TR><TD onClick="SetTransparency(90)" class="headeryellow" onMouseover="className='over'" onMouseout="className='headeryellow'" align="center">90</TD></TR>
 <TR><TD onClick="SetTransparency(100)" class="headeryellow" onMouseover="className='over'" onMouseout="className='headeryellow'" align="center">100</TD></TR>
</TABLE>
</BODY>
</HTML>

Top of Page