Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
Photo
- - - - -

Opacity With Onmouseover And Onmouse Out


3 replies to this topic

#1 web_designer

web_designer

    "french rose sparkle under moonlight"...do you believe in the magic of moonlight??!!...

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,390 posts
  • Gender:Female
  • Location:US, CA
  • Interests:internet and the web
    reading books
    sport
    watching tv series
    drawings and art
  • myCENT:70.51
  • Spam Patrol

Posted 26 February 2010 - 12:06 AM

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
[codebox]

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; }

[/codebox]

add this to your body tag

[codebox]

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

[/codebox]

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

#2 Baniboy

Baniboy

    Advocatus Diaboli

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 878 posts
  • Gender:Male
  • Location:/root
  • Interests:Everything...
  • myCENT:-73.89

Posted 26 February 2010 - 01:51 PM

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

#3 web_designer

web_designer

    "french rose sparkle under moonlight"...do you believe in the magic of moonlight??!!...

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,390 posts
  • Gender:Female
  • Location:US, CA
  • Interests:internet and the web
    reading books
    sport
    watching tv series
    drawings and art
  • myCENT:70.51
  • Spam Patrol

Posted 26 February 2010 - 09:53 PM

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

#4 Baniboy

Baniboy

    Advocatus Diaboli

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 878 posts
  • Gender:Male
  • Location:/root
  • Interests:Everything...
  • myCENT:-73.89

Posted 26 February 2010 - 11:44 PM

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 by Baniboy, 26 February 2010 - 11:46 PM.

  • 0



Reply to this topic



  


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users