PDA

View Full Version : Opacity in Opera

Masterslave
04-10-2006, 02:43 PM
Hello,

I use opacity for my images for a hover affect.
In IE5+, Firefox, Konqueror (and Safari i suppose...) is opacity working but in Opera it doesn't. (code below).
I know that Opera 9 will support the CSS3 opacity selector, but it is still Technology Preview.

I've search the forum and found this thread (http://www.codingforums.com/showthread.php?t=71469&highlight=opacity+opera)...
Also on Google I coudn't find something usefull.

I there any way to make opacity work in Opera8 al least?


#menuspace .row img
{
opacity: 1;/*CSS3*/
-khtml-opacity: 1;/*Konqueror and Safari*/
-moz-opacity: 1;/*Older Mozilla*/
filter: alpha(opacity=100);/*Darn IE*/
}

#menuspace .row a:hover img,
#menuspace .row a:focus img
{
opacity: .5;/*CSS3*/
-khtml-opacity: 0.50;/*Konqueror and Safari*/
-moz-opacity: .50;/*Older Mozilla*/
filter: alpha(opacity=50);/*Darn IE*/
}

This will work in the browsers called at the beginning of the post.
_Aerospace_Eng_
04-10-2006, 02:46 PM
What do you want? It doesn't support it. Nothing you can really do about it other than make your own transparent pngs and use the png js to get transparent pngs in IE.
jkd
04-10-2006, 02:50 PM
Didn't Opera 9 incorporate support of it?
Masterslave
04-10-2006, 02:54 PM
What I want is that when I hover over a image, the image's opacity value will change. Like in my CSS example at the startpost.

Mmm so Opera doesn't support Opacity at all :( too bad.
make your own transparent pngs and use the png js to get transparent pngs in IE.Nobody said something about PNG in IE.:rolleyes:

Didn't Opera 9 incorporate support of it?
Think so, I've read that Opera 9 get a 100% succes at the Acid2 test, so I think the will...
_Aerospace_Eng_
04-10-2006, 02:54 PM
But latest release of Opera is 8.54 I believe. Opera 9 is in beta?
What I want is that when I hover over a image, the image's opacity value will change. Like in my CSS example at the startpost.

Mmm so Opera doesn't support Opacity at all :( too bad.
Nobody said something about PNG in IE.:rolleyes:
Yeah I know no body said anything about png in IE but since you've discovered the current release of Opera doesn't support Opacity your only alternative is transparent pngs. If you haven't worked with transparent pngs lately, IE doesn't support them natively. It needs JS or a special CSS filter to work. I was merely offering an alternative to your opacity.
Masterslave
04-10-2006, 03:02 PM
Ow ok, sorry. Yeah I understand that PNG is my last hope for Opera. And yes I know, transparent PNG is horrible in IE. The have fixed it in IE7 i've read, one of the little things the have fixed at their browser.

Kinda hard for my to write down proper English.:rolleyes:
harbingerOTV
04-10-2006, 04:25 PM
well since I was in the post you linked to I htought I throw this up. It uses the same code but feeds the png image to Opera.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>hacky-opaque-code</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#box {
border: 2px solid #000;
width: 200px;
background: #ccc;
position: relative;
overflow: hidden;
}
#box1 {
width: 100%;
height: 1000px;
position: absolute;
background-color: #f6c;
filter: alpha(opacity=20);
-moz-opacity: .20;
top: 0;
left: 0;
}
@media all and (min-width: 0px){
#box1 {
background: url(pink.png);
}
}
#box2 {
width: 180px;
height: 100%;
margin: 10px;
color: #fff;
position: relative;
z-index: 10;
}
</style>
</head>
<body>
<div id="box">
<div id="box2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nullam erat. Etiam

scelerisque. In hac habitasse platea dictumst. Sed odio lectus, mattis

pellentesque, aliquam

vel, fermentum et, nisl. Praesent id magna. Phasellus quis quam in massa

varius porta. Duis id

nisi. Integer porttitor ligula sed lectus commodo dictum. In bibendum. Fusce

vulputate, dolor

id tincidunt gravida, felis mi ullamcorper tellus, et elementum tortor justo

id turpis.
</div>
<div id="box1"></div>
</div>
</body>
</html>


The png is just a 4x4 image colored #ff66cc and set to 20% opacity in photoshop.
oldcrazylegs
04-10-2006, 07:27 PM
how to get opacity in all graphical browsers including opera.

make a blank image 10pixelsx10pixels or so. make every other pixel transparent. then use it as a background image. i read this in a book somewhere.
harbingerOTV
04-10-2006, 10:12 PM
oldcrazylegs-

that approach is fine if you don't want to put any text over the image. With the little cherboard under it, the text gets gnarled up and it isn't pretty.
Masterslave
04-13-2006, 10:57 AM
Mmm, if test the opacity in Konqueror (KHTML) but it doesn't work. I've used the same code aas my startpost:

#menuspace .row img
{
opacity: 1;/*CSS3*/
-khtml-opacity: 1;/*Konqueror and Safari*/
-moz-opacity: 1;/*Older Mozilla*/
filter: alpha(opacity=100);/*Darn IE*/
}

#menuspace .row a:hover img,
#menuspace .row a:focus img
{
opacity: .5;/*CSS3*/
-khtml-opacity: 0.50;/*Konqueror and Safari*/
-moz-opacity: .50;/*Older Mozilla*/
filter: alpha(opacity=50);/*Darn IE*/
} But it doesn't work, anyone any idea why it doesn't work on Konqueror. I use Konqueror at the latest release of Knoppix.

I use jpg images and here (http://www.thescripts.com/forum/thread98076.html) they use PNG images, I don't know if that a diffrent, I guess not...
_Aerospace_Eng_
04-13-2006, 11:57 AM
I found this thread (http://www.dynamicdrive.com/forums/showthread.php?t=8138&page=3) from searching google. A lot of useful information. I to thought -khtml-opacity worked in Konqeror but then again I never really tested it. Perhaps try .5 rather than 0.5?
Masterslave
04-13-2006, 12:26 PM
Nice, I'll test it when I finished a issue here at my work.:p

edit: I try many thing as giving in that thread:
- style.KhtmlOpacity='0.5' doesn't work
- if I look at this page (http://mwinter.webhop.info/dd/twey/konqueror-opacity.html) I see no opacity in Konqueror
- and if I look here (http://konqueror.kde.org/css/) opacity is not supported...

My Konqueror version is 3.4.1. btw.

I think it isn't possible to make this work... or have you any idea aero?