DIV transparancy change to solid on mouse-over

subtitle:
But also visible in IE6

I started reading the interesting discussion here: http://www.freewaytalk.net/thread/view/34533#m_34545 and although I do not really understand the whole discussion, I do see that it’s possible to set the appearance of a DIV through the Styles menu. To find out how is now a part of my learning process.

But what do I do when I want a DIV to have a transparent background, and on mouse over change that to solid?

I searched here: CSS Image Opacity / Transparency and found this, and naturally some exception for IE6 (and 7?) :frowning:

Must I, and if so, how do I set this code in the Style menu:
onmouseover=“this.style.opacity=1;this.filters.alpha.opacity=100”
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40

and how do I set this in the style menu?
/* for IE /
filter:alpha(opacity=60);
/
CSS3 standard */

Or is this too complex altogether??

Thanks for looking at this.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The mouseover stuff can be added using the Item:Extended dialog. To add the other part, you will need to add your own style block in the Page:HTML Markup dialog.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Waltd

Thank, I found that out.

One more thing
Do you have a tip how I can tell IE6 that this DIV is positioned in front of the rest of the page, and is fixed in the window? IE7 understands it…just like the rest of the civilized browserworld…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Paul Dunning wrote an Action that fixes this bug, years ago. It uses
JavaScript to pin the div in place. But I don’t know if it could be
applied conditionally – only if the browser is doltish – as opposed
to running all the time. Have a look at http://actionsworld.com or in
the Softpress KnowledgeBase for the Action, I think it was called
Layer Position or something like that.

Walter

On Nov 22, 2008, at 7:02 AM, atelier wrote:

Hi Waltd

Thank, I found that out.

One more thing
Do you have a tip how I can tell IE6 that this DIV is positioned in
front of the rest of the page, and is fixed in the window? IE7
understands it…just like the rest of the civilized
browserworld…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have Paul’s Layer Positioning action if you need it though it can fix the layers position in the window I am not so sure that it can determine that it will be the foremost layer.

Le me know if you want it.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

One of the things this trick could use is IE conditional comments:

<!--[if lt IE 7]>
(Insert fixes for IE positioning here)
<![endif]-->

I’m looking at a simple Prototype fix for this problem right now,
I’ll post it if it works out to be easy enough and doesn’t take too
long.

Walter

On Nov 22, 2008, at 10:12 AM, DeltaDave wrote:

I have Paul’s Layer Positioning action if you need it though it can
fix the layers position in the window I am not so sure that it can
determine that it will be the foremost layer.

Le me know if you want it.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, this doesn’t need conditional comments, but it does use
Prototype.js. The patch is automatically applied to any element that
has had its position set to ‘fixed’, and only runs at all if the
browser is IE and the version is less than 7 (the point at which IE
woke up about position:fixed).

Design your page to look good in a modern browser. Any element that
you want to fix in the page, do so.

Apply the Protaculous Action to your page, choose prototype-packed
from the library picker. Click on the top Function Body button in the
Actions palette, and paste in this block of code: http://pastie.org/321383

That’s it.

Now this will be sub-optimal for anyone browsing with IE6, but
they’re used to that anyway. This particular hack will only update
the page when you release the scroll bar (the scroll event ends, in
other words) at which point the fixed elements will snap into place.
Also, performance will drop with each additional element you “fix” to
the page, because the code has to execute once per element.

Walter

On Nov 22, 2008, at 10:32 AM, Walter Lee Davis wrote:

One of the things this trick could use is IE conditional comments:

<!--[if lt IE 7]>
(Insert fixes for IE positioning here)
<![endif]-->

I’m looking at a simple Prototype fix for this problem right now,
I’ll post it if it works out to be easy enough and doesn’t take too
long.

Walter

On Nov 22, 2008, at 10:12 AM, DeltaDave wrote:

I have Paul’s Layer Positioning action if you need it though it
can fix the layers position in the window I am not so sure that it
can determine that it will be the foremost layer.

Le me know if you want it.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This Is Absolutely Amazing.

I do thank you very very much.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options