Opacity With Onmouseover And Onmouse Out

[web_designer 7]

hi, everyone. i am happy that you liked the last topic about opacity.here is another application about opacity, you can use it in divs in your web page. it will still without opacity until you cross over it in mouse. this is an example on how to use it. it works in firefox, opera and internet explorer, i hope you will like it.add this to your CSS file

 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;border:1px solid black; }div.trans25 {width: 100%; background-color: silver;opacity:.25;filter: alpha(opacity=25); -moz-opacity: 0.25;border:1px solid black; }div.trans75 {width: 100%; background-color: silver;opacity:.75;filter: alpha(opacity=75); -moz-opacity: 0.75;border:1px solid black; }

add this to your body tag

 <div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'"><p style="padding:5px;width:75%;">Hover here. The Filter Opacity works in Mozilla and IE.  It also works in current versions of Opera.</p></div>

with a little bit of changes you can use it on images too. have fun.

[Baniboy 3]

Why use javascript when you can use

div:hover { opacity:.50;filter: alpha(opacity=50); }

JavaScript is pointless if the job can be done using CSS. + CSS requires less code. So I see no point using javascript. However, if you have to for some odd reason, use javascript, you can go ahead and use

elem.style.opacity()

, no need to clarify with CSS and JavaScript.

[web_designer 7]

Why use javascript when you can use

div:hover { opacity:.50;filter: alpha(opacity=50); }

JavaScript is pointless if the job can be done using CSS. + CSS requires less code. So I see no point using javascript. However, if you have to for some odd reason, use javascript, you can go ahead and use

elem.style.opacity()

, no need to clarify with CSS and JavaScript.

that is right baniboy. in fact, a few days ago, i posted a topic about opacity using css. but sometimes i prefer using java script because i don't have to worry about browsers compatibility, java script is accepted in most of them even sometimes i have to enable java script in a specific browser, like firefox. also i love java script effects in websites and i love work with it. thank you for your response.

[Baniboy 3]

Update, although the copied content is in code tags.
And my point was, that since you're assuming the user has javascript enabled globally, you could use javascript and eliminate the need for CSS and more code. Altough this way it might be a little simpler to understand. :angel:
I find this a better way of doing it...

Edited February 26, 2010 by Baniboy (see edit history)