Opacity With Onmouseover And Onmouse Out

	Opacity With Onmouseover And Onmouse Out
	Discussion by web_designer with 3 Replies. Last Update: February 26, 2010, 11:44 pm

web_designer

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

CODE

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

CODE

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

Fri Feb 26, 2010 Reply New Discussion

Baniboy

Why use javascript when you can use

CODE

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

CODE

elem.style.opacity()

, no need to clarify with CSS and JavaScript.

Fri Feb 26, 2010 Reply New Discussion

web_designer

QUOTE (Baniboy)

Why use javascript when you can use

CODE

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

CODE

elem.style.opacity()

, no need to clarify with CSS and JavaScript.
Link: view Post: 480121

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.

Fri Feb 26, 2010 Reply New Discussion

Baniboy

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: