Layer Transparent in Web Page - Please help!!

[expertware]

Dear friends,

My name is Pamela, I do not know anything about javascript,
but I would like to ask if it offers a solution to this
problem of mine.

I have an image on a web page within a css layer:

<DIV ID=MyLayer
STYLE = "position: absolute;top:68px; left:563px;
width:640px;height:480px;">
<IMG src="ReportImageBox_12.54.52.png" width=640 height=480></IMG>
</DIV>

I need that the parts of this layer which have a certain color
(for instance "white") be rendered transparent.

My question. Is it possible to have a simple javascript function
to incorporate in the web page which does this??

Thank you very much

-Pamela
..NET Developer

[ASM]

ex********@libero.it a écrit :

Dear friends,

My name is Pamela, I do not know anything about javascript,
but I would like to ask if it offers a solution to this
problem of mine.

I have an image on a web page within a css layer:

<DIV ID=MyLayer
STYLE = "position: absolute;top:68px; left:563px;
width:640px;height:480px;">
<IMG src="ReportImageBox_12.54.52.png" width=640 height=480></IMG>
</DIV>

I need that the parts of this layer which have a certain color
(for instance "white") be rendered transparent.
there is anything opaque in this layer as is
only an image ...

make your transparent background image yourself is the issue

But ... perhaps this image is allready transparent ?
and you have troubles only with Internet Explorer with a PC ?
My question. Is it possible to have a simple javascript function
to incorporate in the web page which does this??

Yes, you need an IE Windows (Mac its OK) hack for png images
rendering.

ask Google : IE hack png css
and ... soluce :
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

good luck (not so easy)

--
Stephane Moriaux et son [moins] vieux Mac

[expertware]

Dear Stephane

Your solution is specific for the png problem (I was thinking in
general, for any image).
It is however useful to have as ie6 still not supporting png
transparency

I am implementing it and have 2 problems which should be simple for one
who knows javascript

1. It assumes the component is placed in an external file:
BEHAVIOR: url("pngbehavior.htc")
since I generate the code programmatically I need it to incorporate the
component
in the web page. How should the above call be modified to run the
component from within the page??

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
......
}

</script>
</public:component>

2. ie blocks the popups. Is there a way to elude it?

Thank you!!

Pamela

[ASM]

ex********@libero.it a écrit :

Dear Stephane

Your solution is specific for the png problem (I was thinking in
general, for any image).

only gif and png can have transparent background

gif images : any browser can eat it :-)

png images : alone IE Win breaks with that format (do think I)

for rest I don't know : I haven't a PC
--
Stephane Moriaux et son [moins] vieux Mac

[ASM]

ex********@libero.it a écrit :

Dear Stephane

I am implementing it and have 2 problems which should be simple for one
who knows javascript

what whom I understood finaly is quite very simple :

download :
http://webfx.eae.net/download/pngbehavior102.zip

extract the file : 'pngbehavior.htc'
and the image : 'blank.gif'

put these 2 files by your page on your site (or HD)
(same folder I presume)

in your page, in its stylesheet, add :

img {
behavior: url("pngbehavior.htc");
}
I think there is not more to do

--
Stephane Moriaux et son [moins] vieux Mac

[ASM]

ASM a écrit :

ex********@libero.it a écrit :

Dear Stephane

I am implementing it and have 2 problems which should be simple for one
who knows javascript

an other url seeming not bad at all :

http://www.mongus.net/pngInfo/
--
Stephane Moriaux et son [moins] vieux Mac

[expertware]

What I meant is that I need to put *Everything* into the same html
file.
No external file. So I was asking what the changes to be done to the
call
behavior: url("pngbehavior.htc");
in order to call a function contained within the same file and not in
an
external one.

Thanks

Pamela

[expertware]

I have found that the same is accomplished more simply
just using the Chroma Filter

here is a demo of web output. Note the 3 pictures on the right, 2 of
which (pie and legenda) are using transparency
if the browser (IE6) warns you, you must allow execution, to see the
transparency effect
http://cam70.sta.uniroma1.it/Technic...tatimedemo.htm

Pamela
Datatime Team
http://cam70.sta.uniroma1.it/TechnicalPreview/

[ASM]

ex********@libero.it a écrit :

What I meant is that I need to put *Everything* into the same html
file.
No external file. So I was asking what the changes to be done to the
call
behavior: url("pngbehavior.htc");
I'm not sure that content of a file *.htc
can be in a *normal* *.htm

in order to call a function contained within the same file and not in
an
external one.

advantage of external file is :
- to do not add weight on each page (hope it'll run from cache)
- if it isn't IE Win this *.htc wil not be downloaded

by one way or other you'll need image 'transparent.gif'

you can try to copy/paste that (after extraction) in the header of your page
(not tested : no PC)
http://perso.wanadoo.fr/stephane.mor...Hack-modif.zip
nota :
transparent.gif, now, has to be near by your page

--
Stephane Moriaux et son [moins] vieux Mac

[ASM]

ex********@libero.it a écrit :

I have found that the same is accomplished more simply
just using the Chroma Filter
yes :

filter:progid:DXImageTransform.Microsoft.Chroma(Co lor=White);

if you use filter take care about particularisms for other browsers
( -moz-opacity -khtml-opacity opacity )
(and that doesn't fix background transparence for them)
here is a demo of web output. Note the 3 pictures on the right, 2 of
which (pie and legenda) are using transparency
if the browser (IE6) warns you, you must allow execution, to see the
transparency effect
http://cam70.sta.uniroma1.it/Technic...tatimedemo.htm
where have gone transparencies with this images ?
did you have a look to that with i.e. FireFox ?

if I may :
your generator Datatime
is completly mad in his head !
Never I saw so much inutilities in a page
Pamela
Datatime Team
http://cam70.sta.uniroma1.it/TechnicalPreview/

Unfortunatly it seems Mac aren't welcomed

--
Stephane Moriaux et son [moins] vieux Mac

[expertware]

Dear Stephane,

also the script you suggested only worked with IE. So don't see why
you are so upset with this.

Also I don't understand what you are referring to talking about
inutilities.
Datatime although still in development is used by some hundred person
which think it is very useful and support us with their suggestions.
Here is for instance just the last email we received:

----------------------------------------------
....
I had a pleasure to try out Datatime.
Have to say it is a very promising tool, that is already needed at
development of BI solutions for end customers.

Me and company I'm working for, present no.1 player in Slovenia as it
goes for BI solutions.
At this moment we develop on Microsoft platform in combination of
ProClarity.
Therefore we are also MS Gold partner for BI and also ProClarity
partner.

But as you know there is not tool to satisfy the customer in full.
That is way I'm always on look out for new tools that could help
satisfy the customer.

For sure, your product has good future as it is very simple to use and
you can develop pretty easily and fast a good report.
And these two aspects are the most vital when we are talking about
customers. As they need report yesterday and they do not have a
knowledge of developer.

And as I've seen that you are taking ideas and advises from others I
would like to participate.
With the knowledge and experience I have, I can certainly help you with
some ideas what customers need and what we as developers need as well.
Then also how to use data from OLAP cubes and so on...

I hope I'll be hearing from you soon.

Best Regards,
-------------------------------------

However I consider criticism more valuable than anything and I am *
very * interested to hear what you perceive as useless so that I can
correct the problem. I know the art to learn from mistakes. Please be
constructive.

I hope it is not that it is just for ps and not for mac :-)

Pamela
http://cam70.sta.uniroma1.it/TechnicalPreview/

[ASM]

ex********@libero.it a écrit :

Dear Stephane,
Amica Pamela,
also the script you suggested only worked with IE. So don't see why
you are so upset with this.
Of course, because only IE (Windows) can do nothing with png
so ... why to force other browsers to read IE's soup ?

by otherelse
I'm not certain both scripts do exactly same work.
Without help of a PC Win it's not too easy to juge.

By the fact, it seems your png have loosen their natural transparence
and, by chance, you see this transparence with your own equipment.
Will an other guy with IE 5.5 and Win98 see the same ?
Will an other fellow coming with Mozilla see the same ?
Also I don't understand what you are referring to talking about
inutilities.
repeating on each tag complete list of classes (for one alone word !)

It can't create a styles sheet ?
Datatime although still in development is used by some hundred person
which think it is very useful and support us with their suggestions.
Here is for instance just the last email we received:

----------------------------------------------
...
I had a pleasure to try out Datatime.
Have to say it is a very promising tool, that is already needed at
development of BI solutions for end customers.
probably it is beter than to use Word to write html :-/
At this moment we develop on Microsoft platform
all was said ...

[...]
For sure, your product has good future as it is very simple to use and
you can develop pretty easily and fast a good report.
And these two aspects are the most vital when we are talking about
customers. As they need report yesterday and they do not have a
knowledge of developer.

And as I've seen that you are taking ideas and advises from others I
would like to participate.
With the knowledge and experience I have, I can certainly help you with
some ideas what customers need and what we as developers need as well.
Then also how to use data from OLAP cubes and so on...
30 lines without nothing clear neither concrete, of what is he speaking?

typical consulting talk
However I consider criticism more valuable than anything and I am *
very * interested to hear what you perceive as useless so that I can
correct the problem. I know the art to learn from mistakes. Please be
constructive.
I know any of Datatime capabilities
I did only see an html code not very clean or soft.

At least 10 screens scroll down to reach the tag of pie image
(exactly : image is at 14 983th line)
I hope it is not that it is just for ps and not for mac :-)
Si, me ha multo gonfiato :-)
e no sono solo si se guardara questa pagina.

No, it's realy because 15000 lines for a single html page is really too much.
Tidy tells me : ID have unauthorized names - i.e. ID=Cell1,2
I don't know why but FF found some cabalistic signs before doctype : 
Buiding an sql engine doesn't mean having a fine html exporter/editor/writer
Pamela
http://cam70.sta.uniroma1.it/TechnicalPreview/

OK, I did download Oracle client and Datatime
and now ?
(proposed DB from M$ is in an *.exe ... :-( )

--
Stephane Moriaux et son [moins] vieux Mac

[expertware]

Of course, because only IE (Windows) can do nothing with png
so ... why to force other browsers to read IE's soup ? By the fact, it seems your png have loosen their natural transparence
and, by chance, you see this transparence with your own equipment.
Will an other guy with IE 5.5 and Win98 see the same ?
Will an other fellow coming with Mozilla see the same ?
Actually I do not know anyone around here or in any company I have
visited
who is using something different from ie.

However, following your suggestion I have modified some code.
Can you tell me if now you can see transparency with the browsers
you use. Here is the new output:
http://cam70.sta.uniroma1.it/Technic...ansparency.htm
http://cam70.sta.uniroma1.it/Technic...tatimedemo.htm

Also I don't understand what you are referring to talking about
inutilities.

repeating on each tag complete list of classes (for one alone word !)

You must understand I have to generate this automatically, from a
context
where the user can modify the appeareance of each single cell.
The user is enabled to write programs which can change the appearance
of
cell if certain conditions happen (these are "Alarms".)
Let me know if you have ideas on how to do that more elegantly.

To hide this I could remove all the CRLF (new line) so that the user
can't
really see what's going on.
Take in mind that here we are not doing an exercise of CSS style.
The goal is another. The User has a paper report which he likes and he
wants to get a web page with the same visual appearance. He does not
know
anything about CSS. He just want the result.

It can't create a styles sheet ?
Same problem as above.
What I could do is a preliminary filtering of all cell
and establish all the different styles. For each one I could
create a stylesheet.
This is annoying to code and will subtract a few millisecons to the
page generation and I don't know if the user (people in companies) can
really appreciate the difference. Let me know what you think about such
solution.

probably it is beter than to use Word to write html :-/
Here you are missing the point. Datatime is NOT a program to make CSS
or Html
it process data and makes reports. Html output is a just a feature.
Also don't be too purist. Word is just find for some million of people.

Have you taken a look at the code generated by Front page. I use it to
maintain
the pages of Datatime. The code it generates is ununderstandable and
perhaps much more crazy tha mine but still Front page does its job
wonderfully for me who I have to focus on other things (Writing
beautiful
..NET code) than writing beautiful html code..

At this moment we develop on Microsoft platform

If you want to make money ...
[...]

For sure, your product has good future as it is very simple to use and
you can develop pretty easily and fast a good report.
And these two aspects are the most vital when we are talking about
customers. As they need report yesterday and they do not have a
knowledge of developer.

And as I've seen that you are taking ideas and advises from others I
would like to participate.
With the knowledge and experience I have, I can certainly help you with
some ideas what customers need and what we as developers need as well.
Then also how to use data from OLAP cubes and so on...
30 lines without nothing clear neither concrete, of what is he speaking?

typical consulting talk

Here you are missing a big part of reality
I know any of Datatime capabilities
I did only see an html code not very clean or soft.
At least 10 screens scroll down to reach the tag of pie image
(exactly : image is at 14 983th line)
Help me make it clean (keeping in mind it is a translation from another
very very complex program)

I hope it is not that it is just for ps and not for mac :-)

Si, me ha multo gonfiato :-)
e no sono solo si se guardara questa pagina.

:-)

No, it's realy because 15000 lines for a single html page is really too much.
Tidy tells me : ID have unauthorized names - i.e. ID=Cell1,2
I don't know why but FF found some cabalistic signs before doctype : 
Buiding an sql engine doesn't mean having a fine html exporter/editor/writer
If the problem is the number of lines I can remove the line feed. But
I guess you mean something else. Again help me to make it better...


OK, I did download Oracle client and Datatime
and now ?
(proposed DB from M$ is in an *.exe ... :-( )

It install the Northwind.mdb a well known sample database
If you can redownload Datatime, because in the meantime
I have done some correction in the code of the chart
generator, since some event handlers had been disconnected.

Thank you very much for you support abd help.

If you wish why don't' you join our supporting expert community:
http://cam70.sta.uniroma1.it/Technic...articipate.htm
Pamela
..NET Developer
Datatime Team
http://cam70.sta.uniroma1.it/TechnicalPreview/

[ASM]

ex********@libero.it a écrit :

Would it be possible to continue this conversation in private ?
my e-mail : stephane.moriaux at wanado.fr

Actually I do not know anyone around here or in any company I have
visited
who is using something different from ie.
Anybody except your contributers know you ?
However, following your suggestion I have modified some code.
Can you tell me if now you can see transparency with the browsers
you use. Here is the new output:
http://cam70.sta.uniroma1.it/Technic...ansparency.htm
Do you work on a 43" screen ?
half a minute to download this page (DSL 512)
Ring : has its background completely transparent and itself semi-transparent
Pie : only background seems transparent
both IE and FF (Mac)
http://cam70.sta.uniroma1.it/Technic...tatimedemo.htm
same appearance - but here also : 4 screens width ... load = 30s
and here too, always this characters in all up of page : 
You must understand I have to generate this automatically, from a
context
where the user can modify the appeareance of each single cell.
I think, I finish to understand DataTime is not a web-editor :-)
Let me know if you have ideas on how to do that more elegantly.
I know anything about programming, but if you consider Tidy (from W3C)
with no more than 2 or 3 hundred ko which can create a styles sheet
from an old html (font and all that) in 1 second
and during same time analyze code and clean it to be respectful
of W3C recomandations, I expect something could be done.
You find Tidy in numerous softs for wed edition (PC Win, Linux, Mac 9 & 10)
directly in soft's code or by add-on or by plug-in.
Exists also in stand alone.
Open source certainly have a lot of applications in this way.
To hide this I could remove all the CRLF (new line)
I focused on number of lines to show there is a problem
This problem is redondance and multiples doublons in styles

And something I don't understand at all :
why don't you use <table> to display tables from a database ?
insteed of a crowdy collection of divs positionned individualy
in absolute ?
Here you are missing the point. Datatime is NOT a program to make CSS
or Html
it process data and makes reports. Html output is a just a feature.
Also don't be too purist. Word is just find for some million of people.
but it is an horror to create web pages
Have you taken a look at the code generated by Front page.
I did long time ago ... direct to dustbin !
but still Front page does its job
wonderfully for me who I have to focus on other things (Writing
beautiful

writing beautifully and not using what is made for (table)
are incompatible for sure.

And we are still out of subjects (javascript)

folowing in private ?

--
Stephane Moriaux et son [moins] vieux Mac

[expertware]

Tried but:
- These recipients of your message have been processed by the mail
server:
st**************@wanado.fr; Failed; 5.1.1 (bad destination mailbox
address)

Remote MTA SMTP1.lerelaisinternet.com: SMTP diagnostic: 550 5.1.1
<st**************@wanado.fr>... No such user

can reach me at pa***********@libero.it or can also use
ex********@libero.it
which I often monitor for our project head

[expertware]

Dear Stephane,
I have revised the web export routine for Datatime. Here is a new
sample output:
http://cam70.sta.uniroma1.it/Technic...ansparency.htm
Pamela
Datatime Team

[Robi]

[crossposting to comp.infosystems.www.authoring.html
followup to comp.infosystems.www.authoring.html]
since my reply doesn't have to do with javascript
but with web authoring and HTML standards

expertware at libero it wrote in message news:11*********************@g44g2000cwa.googlegro ups.com...

Dear Stephane,
I have revised the web export routine for Datatime. Here is a new
sample output:
http://cam70.sta.uniroma1.it/Technic...ansparency.htm

Mamma mia!!!!
what are you doing!

tabular data doesn't mean a table for each field
please excuse me for being a stronzo, but I just have to cry out!

Think about somebody who is vision impaired and needs the data
to be read out by the computer.

the following does pretty much what you show (and does it in a tabular way):

<html>
<head>
<title>Report generated: by hand by robi</title>
<style type="text/css" media="screen">
..c2{background:#f0f8ff;border-width:1px;border-style:inset;
color:#000000;text-align:center;font-family:"Courier New";
font-size:11px;}
..c3{background:#f0fff0;border-width:1px;border-style:outset;
color:#008000;text-align:left;font-family:"Tahoma";
font-size:11px;font-weight:bold;}
..c4{background:#fffff0;border-width:1px;border-style:outset;
color:#000000;text-align:left;font-family:"Tahoma";
font-size:11px;font-weight:bold;}
..c5{background:#008000;border-width:1px;border-style:outset;
color:#ffffff;text-align:center;font-family:"Tahoma";
font-size:11px;font-weight:bold;}
..c6{background:#006400;border-width:1px;border-style:outset;
color:#ffffff;text-align:center;font-family:"Tahoma";
font-size:11px;font-weight:bold;}
..c7{background:#1e90ff;border-width:1px;border-style:inset;
color:#ffffff;text-align:center;font-family:"Tahoma";
font-size:11px;font-weight:bold;}
..c8{background:#4169e1;border-width:1px;border-style:inset;
color:#ffffff;text-align:center;font-family:"Tahoma";
font-size:11px;font-weight:bold;}
..c9{background:#ffffe0;border-width:1px;border-style:inset;
color:#000000;text-align:center;font-family:"Courier New";
font-size:11px;font-weight:bold;}
..c10{background:#ffe4e1;border-width:1px;border-style:inset;
color:#0000ff;text-align:center;font-family:"Courier New";
font-size:11px;}
..c11{background:#90ee90;border-width:1px;border-style:none;
color:#ff0000;text-align:center;font-family:"Tahoma";
font-size:15px;font-weight:bold;}
</style>
</head>
<body>
<table border="0" width="573">
<tr height="19">
<th colspan="5" class="c11">Argentina</td>
</tr>
<tr height="35">
<th class="c5" width="281" valign=middle>SHIPADDRESS</td>
<th class="c6" width="95" valign=middle>SHIPCITY</td>
<th class="c7" valign=middle>ORDERID </td>
<th class="c8" valign=middle>FREIGHT </td>
<th class="c7" valign=middle>SHIPVIA </td>
</tr>
<tr height="21">
<td class="c4">Av. del Libertador 900</td>
<td class="c4">Buenos Aires</td>
<td class="c2">5</td>
<td class="c2">5</td>
<td class="c2">5</td>
</tr>
<tr height="21">
<td class="c3">Cerrito 333</td>
<td class="c3">Buenos Aires</td>
<td class="c10">6</td>
<td class="c10">6</td>
<td class="c10">6</td>
</tr>
<tr height="21">
<td class="c4">Ing. Gustavo Moncada 8585</td>
<td class="c4">Buenos Aires</td>
<td class="c2">5</td>
<td class="c2">5</td>
<td class="c2">5</td>
</tr>
<tr height="20">
<td></td>
<td></td>
<td class="c9">16</td>
<td class="c9">16</td>
<td class="c9">16</td>
</tr>
</table>
</body>
</html>

the above table could also be defined as follows:

<table border="0" width="573">
<thead>
<tr height="19">
<th colspan="5" class="c11">Argentina</td>
</tr>
<tr height="35">
<th class="c5" width="281" valign=middle>SHIPADDRESS</td>
<th class="c6" width="95" valign=middle>SHIPCITY</td>
<th class="c7" valign=middle>ORDERID </td>
<th class="c8" valign=middle>FREIGHT </td>
<th class="c7" valign=middle>SHIPVIA </td>
</tr>
</thead>
<tfoot>
<tr height="20">
<td></td>
<td></td>
<td class="c9">16</td>
<td class="c9">16</td>
<td class="c9">16</td>
</tr>
</tfoot>
<tbody>
<tr height="21">
<td class="c4">Av. del Libertador 900</td>
<td class="c4">Buenos Aires</td>
<td class="c2">5</td>
<td class="c2">5</td>
<td class="c2">5</td>
</tr>
<tr height="21">
<td class="c3">Cerrito 333</td>
<td class="c3">Buenos Aires</td>
<td class="c10">6</td>
<td class="c10">6</td>
<td class="c10">6</td>
</tr>
<tr height="21">
<td class="c4">Ing. Gustavo Moncada 8585</td>
<td class="c4">Buenos Aires</td>
<td class="c2">5</td>
<td class="c2">5</td>
<td class="c2">5</td>
</tr>
</tbody>
</table>