General [M]ayhem

Go Back   General [M]ayhem > Real Time Sub-Forums > CompuGlobalHyperMegaNet
Register Members List Mark Forums Read [M]erchandise Calendar

Reply
 
Thread Tools
Mertous
 
Adjust image brightness using CSS/Javascript? Or have to be server side?

Can you adjust the brightness of an image using javascript or css? This is simply for a mouse rollover.

Or will it have to be done in php and then use javascript to change the images on rollover? (really don't want to have to do it that way so a nice client-side way around it would be good).

Thanks in advance.
Old 05-26-2006, 12:53 PM Mertous is offline  
Reply With Quote
#1  

Advertisement [Remove Advertisement]

SnarkFish
This post probably contains a URL
 
SnarkFish's Avatar
 
like this?

Code:
a img {filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6;}
a:hover img {filter:none; -moz-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}
__________________
"That fucker always wins the URL competitions. I think he sold his soul to Google." -fly
the MD5 incident - www.genmay.net/showthread.php?p=1325652#post1325652
Old 05-26-2006, 01:18 PM SnarkFish is offline  
Reply With Quote
#2  

Accident Prone
roommate = :drool:
 
Accident Prone's Avatar
 
you can overlay a semi transparent white png

Code:
<style>
a:hover{
background: url(/images/transpng.png) !important;
background: none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transpng.png', sizingMethod='scale')"
}
</style>

<div style="width:100px; height:100px; background: url(/images/urimage.jpg);">
<a href="" style="width:100px; height:100px;display: block;">&nbsp;</a>

</div>
Old 05-26-2006, 01:22 PM Accident Prone is offline  
Reply With Quote
#3  

Mertous
 
Quote:
Originally Posted by SnarkFish
like this?

Code:
a img {filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6;}
a:hover img {filter:none; -moz-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}

Won't pass the standards checker will it?
Old 05-26-2006, 01:27 PM Mertous is offline  
Reply With Quote
#4  

Mertous
 
Quote:
Originally Posted by Accident Prone
you can overlay a semi transparent white png

Code:
<style>
a:hover{
background: url(/images/transpng.png) !important;
background: none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transpng.png', sizingMethod='scale')"
}
</style>

<div style="width:100px; height:100px; background: url(/images/urimage.jpg);">
<a href="" style="width:100px; height:100px;display: block;">&nbsp;</a>

</div>

can said png be 1pixel in size?
Old 05-26-2006, 01:27 PM Mertous is offline  
Reply With Quote
#5  

Accident Prone
roommate = :drool:
 
Accident Prone's Avatar
 
Quote:
Originally Posted by Mertous
can said png be 1pixel in size?
yep
Old 05-26-2006, 01:29 PM Accident Prone is offline  
Reply With Quote
#6  

Mertous
 
Quote:
Originally Posted by Accident Prone
yep

Cool this looks like it's probably my solution.

Thanks guys
Old 05-26-2006, 01:30 PM Mertous is offline  
Reply With Quote
#7  

Accident Prone
roommate = :drool:
 
Accident Prone's Avatar
 
Quote:
Originally Posted by Mertous
Cool this looks like it's probably my solution.

Thanks guys

also, filter: wont pass standards checker as its a microsoft only thing
Old 05-26-2006, 01:30 PM Accident Prone is offline  
Reply With Quote
#8  

Reply


Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump



All times are GMT -7. The time now is 11:50 PM.



Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.