Newsgroup: it.comp.lang.javascript
Titolo: Sovraimpressioni

Ciao a tutti.
C'e' un modo in javascript di creare l'effetto sovraimpressione?
Mi spiego meglio: voglio visualizzare una immagine su una pagina HTML, che
rimanga ferma in una posizione anche quando faccio lo scroll della pagina.
Grazie quanti mi aiuteranno.
kam...@tin.it

Devi usare un foglio di stile:
<style type="text/css">
<!--
BODY
{
    background-image: url(nomefile.gif);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center
}
//-->
</style>
P.S.: Per il momento funzia solo per IE, ma spero presto che NS si adegui
presto (NS supporta solo background-image: url(nomefile.gif); :(
CIAO :)
---
the fly on the net
webmaster di THE DEVIL INSIDE
http://members.tripod.com/netfly
e-mail:
net...@netbusiness.it

 </style>
Secondo me c'e' qualcosa di meglio ... visita geocities, ci dovrebbe essere
una g che ti segue mentre fai lo scrolling e dovrebbe funzionare anche con
NN.
Ciao
Luca

rimanga ferma in una posizione anche quando faccio lo scroll della pagina.
Trovi 2 scripts che ti aiuteranno agli indirizzi:
http://www.ipoint2000.net/galileo/dhtml/demo/grafica_img/ie_img_fissa/ie_img_fissa.htm
e
http://www.ipoint2000.net/galileo/dhtml/demo/grafica_img/ie_img_fissa/ie_img_fissa_2.htm
funzionano con Explorer ma con Netscape non vanno (come se non ci
fosse l'immagine)... l'importante e' che non dia errore.
Ciao.
Roberto e Alessandro Abbate. Galileo
http://www.ipoint2000.net/galileo

Ah, quella di geocities è un layer.
<div style="position: absolute | relative; left: pixel; top: pixel">
    ...
</div>
---
Ti metto la documentazione Netscape per il posizionamento dei layer:
[Contents] [Prev page] [Next page] [Index]
----------------------------------------------------------------------------
----
Dynamic HTML in Netscape Communicator
Part 2. Positioning HTML Content
Chapter 8
Defining Positioned Blocks of HTML Content
This chapter discusses how to specify either absolute or relative positions
for blocks of HTML content. It lists all the characteristics you can specify
for a positioned block of HTML content, describes the <NOLAYER> tag, and
discusses the behavior of applets, plug-ins, and forms in positioned blocks
of HTML content.
Absolute versus Relative Positioning.
Attributes and Properties
The <NOLAYER> Tag
Applets, Plug-ins, and Forms
----------------------------------------------------------------------------
----
Absolute versus Relative Positioning.
A layer can have an absolute position or a relative position.
Absolute Positioning
If a layer has an absolute position, you can specify its position within its
containing layer, or within the document if it is not inside another layer.
You define the exact position of the top, left corner of the layer by
setting the left and top attributes or properties.
For a layer with absolute position, if you do not provide values for the
left and top attributes or properties, they default to the value of the
current position in the containing layer. For a layer at the top level, you
can think of the document as the containing layer.
A layer with an absolute position is considered out-of-line in that it can
appear anywhere in an HTML document, and does not take up space in the
document flow.
To create a layer with an absolute position, use the <LAYER> tag with a
matching </LAYER> tag to identify the end of the layer. For layers defined
as styles, create a layer with an absolute position simply by specifying the
position property as absolute. For example:
<LAYER ID=layer1 TOP=200 LEFT=260>
 <P>Layer 1 content goes here</P>
</LAYER>
<STYLE type="text/css">
<!--
#layer1 {position:absolute; top:200px; left:260px;}
-->
</STYLE>
Relative Positioning
A layer with a relative position is known as an inflow layer, and it appears
wherever it naturally falls in the flow of the document. Inflow layers are
considered to be both inflow, because they occupy space in the document
flow, and inline, because they share line space with other HTML elements. If
you want an inflow layer to appear on a separate line, you can insert a
break before the layer, or wrap the layer in the <DIV> tag.
For layers with relative positions, you can use the left and top attributes
or properties to specify the offset of the layer's top-left corner from the
current position in the document.
To create an inflow layer, you can use the <ILAYER> tag with a closing
</ILAYER> tag. For layers defined as styles, create an inflow layer by
specifying the position property as relative.
For example:
<ILAYER ID=layer2>
 <P>Layer 2 content goes here</P>
</ILAYER>
<STYLE type="text/css">
<!--
#layer2 {position:relative; }
-->
</STYLE>
----------------------------------------------------------------------------
----
Attributes and Properties
This section lists all the attributes or properties that you can specify
when defining layers, whether you use the <LAYER> and <ILAYER> tags to
create layers, or you define layers as styles. (This list only includes only
those properties that are relevant to layers. A style definition for a layer
can include any style property. See Chapter 5, "Style Sheet Reference," for
a list of all the other style sheet properties.)
For the sake of simplicity, in this section the term parameter means either
an HTML attribute or a style property. For example, the ID parameter means
either the ID attribute that can be used with the <LAYER> tag or the ID
style property. Whenever the term attribute is used, it means an attribute
for an HTML tag. Whenever the term property is used, it means a style
property.
The <LAYER> tag always uses pixels as the unit of measurement for attributes
that specify a distance. You do not need to specify the measurement units.
For style properties however, you should always specified measurement units
for properties that have numerical values.
POSITION
ID
LEFT and TOP
PAGEX and PAGEY
SRC and source-include
Z-INDEX, ABOVE and BELOW
WIDTH
HEIGHT
CLIP
VISIBILITY
BGCOLOR and BACKGROUND-COLOR
BACKGROUND and BACKGROUND-IMAGE
OnMouseOver, OnMouseOut
OnFocus, OnBlur
OnLoad
----------------------------------------------------------------------------
----
POSITION
#block1 {position:absolute;}
#block2 {position:relative;}
The position property applies only to layers defined as styles. It indicates
that the style represents a positioned block of HTML. Its value can be
either absolute or relative.
A style whose position property is absolute creates a layer similar to one
created by the <LAYER> tag. A style whose position property is relative
creates a layer similar to one created by using the <ILAYER> tag.
----------------------------------------------------------------------------
----
ID
<LAYER ID=block1>
#block1 {position:absolute;} /* CSS */
The ID parameter is an identification handle, or name, for the layer. The ID
must begin with an alphabetic character. (The ID attribute was previously
called NAME. The NAME attribute still works, but its use is discouraged,
since it is only applicable to the <LAYER> tag).
You can use the layer's id as a name to refer to the layer from within HTML
and from external scripting languages such as JavaScript.
This attribute is optional; by default, layers are unnamed, that is, they
have no id.
----------------------------------------------------------------------------
----
LEFT and TOP
The LEFT and TOP parameters specify the horizontal and vertical positions of
the top-left corner of the layer within its containing layer, or within the
document if it is at the top level. Both parameters are optional. The
default values are the horizontal and vertical position of the layer's
contents as if it was not enclosed in a layer. The value must be an integer.
For layers with absolute positions, the origin is the upper-left corner of
the document or containing layer, with coordinates increasing downward and
to the right.
The default units for LEFT and TOP when used in the <LAYER> tag is pixels.
When defining a layer as a style, however, you need to specify the units.
For example:
<LAYER> Tag Syntax
<LAYER BGCOLOR="yellow" TOP=300 LEFT =70
    WIDTH=400 HEIGHT=200>
  <P>Paragraph in layer with absolute position.</P>
  <LAYER BGCOLOR=teal TOP=50 LEFT=20
      WIDTH=200 HEIGHT=100>
    <P>Paragraph in embedded layer with absolute position</P>
  </LAYER>
</LAYER>
CSS Syntax
<DIV STYLE="position:absolute; background-color:yellow;
  top:300px; left:70px; width:200px; height:200px;
  border-width:1;">
 <P>Paragraph in layer with absolute position.</P>
 <DIV STYLE="position:absolute; background-color:teal;
    top:30px; left:20px; width:150px; height:120px;
    border-width:1px;">
    <P>Paragraph in embedded layer with absolute position.</P>
  </DIV>
</DIV>
For layers with relative positions, the origin is the layer's "natural"
position in the flow, rather than the upper-left corner of the containing
layer or page. You can also use the LEFT and TOP parameters to offset a
relatively positioned layer from its natural position in the flow, as shown
in the following example.
<LAYER> Tag Syntax
<P>Paragraph above relatively positioned layer.</P>
<P><ILAYER LEFT=2>
This relatively positioned layer is displaced 2 pixels to the right of
its normal position.
</ILAYER></P>
<P>Paragraph below relatively positioned layer</P>
<P>This <ILAYER TOP=3>word</ILAYER> is nudged down 3 pixels.</P>
CSS Syntax
<P>Paragraph above relatively positioned layer.</P>
<P STYLE="position:relative; left:2px;">
This relatively positioned layer is displaced 2 pixels to the right of
its normal position.</P>
<P>Paragraph below relatively positioned layer.</P>
<P>This <SPAN STYLE="position:relative; top:3px;>word </SPAN> is nudged
down 3 pixels.</P>
The following code illustrates another example of relatively positioned
layers defined as styles.
STYLE TYPE="text/css">
<!--
all.UP {position:relative; top:-10pt;}
all.DOWN {position:relative; top:10pt;}
-->
</STYLE>
<BODY>
<P>This <SPAN CLASS=DOWN>text </SPAN>goes <SPAN CLASS=UP>up</SPAN>
and <SPAN CLASS=DOWN>down, </SPAN>up
<SPAN CLASS=DOWN>and <SPAN CLASS=DOWN>down.</SPAN></SPAN>
</P>
</BODY>
To see the results of some of the examples given in this section, see:
updown.htm
Using Inline JavaScript to Position Layers
When using the <LAYER> tag, you can use also inline JavaScript scripted
expressions to position the layer. For example, you can position one layer
relative to another.
The following example uses inline JavaScript code to define a layer whose ID
is suspect1, and then defines another layer whose ID is suspect2 that is
positioned 10 pixels below the bottom of the first suspect.
<LAYER ID="suspect1">
    <IMG WIDTH=100 HEIGHT=100 SRC="suspect1.jpg">
    <P>Name: Al Capone
    <P>Residence: Chicago
</LAYER>
<LAYER ID="suspect2"
    LEFT=&{"&"};{window.document.suspect1.left};
    TOP=&{"&"};{window.document.suspect1.top +
        document.suspect1.document.height + 10};>
    <IMG WIDTH=100 HEIGHT=100 SRC="suspect2.jpg">
    <P>Name: Lucky Luciano
    <P>Residence: New York
</LAYER>
Notice these two points in the previous example:
You need to use a semicolon outside the closing curly brace.
You get the value of top from the layer, but you get the value of height
from the layer's document.
Although you cannot use inline JavaScript within a style definition for a
layer, you CAN use JavaScript to reposition such a layer after it has been
defined.
----------------------------------------------------------------------------
----
PAGEX and PAGEY
<LAYER PAGEX=100 PAGEY=100>
These attributes are used only with the <LAYER> tag; there is no equivalent
style property.
The PAGEX and PAGEY attributes specify the horizontal and vertical positions
in pixels of the top-left corner of the layer relative to the enclosing
document (rather than the enclosing layer.)
----------------------------------------------------------------------------
----
SRC and source-include
<LAYER SRC="htmlsource/meals/special.htm>
source-include:url("htmlsource/meals/special.htm"); /* CSS */
The SRC attribute for the <LAYER> tag and the source-include style property
specify an external file that contains HTML-formatted text to be displayed
in this layer. (Note that the source-include style property is not approved
by W3C.)
The file specified can contain an arbitrary HTML document.
The following code shows an example of the use of the SRC attribute and
include-source property.
CSS Syntax
<STYLE TYPE="text/css">
<!--
#layer1 {
 position:absolute;
 top:50pt; left:25pt; width:175pt;
 include-source:url("content1.htm");
 background-color:purple;
color:yellow; border-width:1; }
-->
</STYLE>
<BODY BGCOLOR=white>
<DIV ID=layer1>
</DIV>
<LAYER> Tag Syntax
<LAYER top=50 left=250 width=175
  src="content1.htm"
  BGCOLOR="#8888FF">
</LAYER>
</BODY>
To see the results of this example, select:
source1.htm
The source file can include JavaScript code. Any layers in the source file
are treated as child layers of the layer for which the source file is
providing content.
Using an external source as the content of your layer is particularly useful
if you want to dynamically change the content of the layer. For example, a
restaurant might have a web page that uses a layer to describe the special
meal of the day. Each morning, after the chef has decided what the special
is going to be for the day, he or she quickly edits the file "special.htm"
to describe the meal.
The chef doesn't have to rewrite the entire page just to update the
information about the special of the day.
It can also be a very good idea to use external source as the content of a
layer when you wish to provide alternative content for browsers that do not
support layers. In that case, you can use the <NOLAYER> tag to enclose the
content to be displayed on browsers that do not support layers, as
illustrated in the section "The <NOLAYER> Tag."
----------------------------------------------------------------------------
----
WIDTH
<LAYER WIDTH=200>
<LAYER WIDTH="80%">
width:200px; /* CSS */
width:80%; /* CSS */
The WIDTH parameter determines the width of the layer at which the layer's
contents wrap. The width can be expressed as an integer value, or as a
percentage of the width of the containing layer.
Note, however, that if the layer contains elements that cannot be wrapped,
such as images, that extend beyond the specified width, the actual width of
the layer expands accordingly.
If this parameter is not specified, the layer contents wrap at the right
boundary of the enclosing layer.
See Chapter 13, "Changing Wrapping Width Example," for an example of
dynamically changing the wrapping width of a layer.
----------------------------------------------------------------------------
----
HEIGHT
<LAYER HEIGHT=200>>
<LAYER HEIGHT = "50%">
height:200px; /* CSS */
height:50%; /* CSS
The HEIGHT parameter determines the initial height of the clipping region of
the layer. The height can be expressed as an integer value, or as a
percentage of the height of the containing layer (or the window for a
top-level layer.)
Note, however, that if the contents of the layer do not fit inside the
specified height, the layer increases its height to include all its
contents.
The main purpose of the HEIGHT parameter is to act as the reference height
for children layers that specify their heights as percentages.
By default, the height is the minimum height that contains all the layer
contents.
----------------------------------------------------------------------------
----
CLIP
<LAYER CLIP="20,20,50,100">
clip:rect(0,100,100,0); /* CSS */
The CLIP parameter determines the clipping rectangle of the layer, that is,
it defines the boundaries of the visible area of the layer.
The value is a set of four numbers, each separated by a comma, and
optionally enclosed in a string. If you omit the quotes, be sure not to have
any white space between the four numbers. The numbers indicate the left
value, the top value, the right value, and the bottom value in order. The
left and right values are specified as pixels in from the left edge of the
layer itself, while the top and bottom values are specified as pixels down
from the top edge of the layer itself.
Each of the four values are numbers of pixels. You can also specify the
value as a set of two numbers, in which case the left and top values default
to 0. For example:
CLIP="10,20"
is equivalent to
CLIP="0,0,10,20"
If the CLIP attribute is omitted, the clipping rectangle of a layer is
determined by the values of WIDTH, HEIGHT, and the content of the layer. If
neither of these values are given, by default, the clip left value of a
layer is 0; clip top is 0; clip right is the wrapping width, and clip height
is the height required to display all the contents.
For an example of changing the clipping region of a layer, see Chapter 12,
"Expanding Colored Squares Example.".
----------------------------------------------------------------------------
----
Z-INDEX, ABOVE and BELOW
<LAYER Z-INDEX=3>
<LAYER ABOVE=layer1>
<LAYER BELOW=greenlayer>
z-index:3; /* css */
The ABOVE and BELOW attributes are used with the <LAYER> tag. There are no
corresponding style properties.
These parameters specify the z-order (stacking order) of layers. If you set
one of these parameters, it overrides the default stacking order which is
determined by placing new layers on top of all existing layers. Only one of
the Z-INDEX, ABOVE, or BELOW parameters can be used for a given layer.
The Z-INDEX parameter allows a layer's z-order to be specified in terms of
an integer. Layers with higher-numbered Z-INDEX values are stacked above
those with lower ones. Only positive Z-INDEX values are allowed.
The ABOVE attribute specifies the layer immediately on top of a newly
created layer; that is, the new layer is created just below the layer
specified by the ABOVE attribute. (The ABOVE and BELOW attributes are not
available in as style properties.)
Similarly, the BELOW attribute identifies the layer immediately beneath the
newly created layer. For either attribute, the named layer must already
exist. Forward references to other layers result in default layer creation
behavior (as if the ABOVE or BELOW attribute had not appeared).
Currently all nested layers exist above their parent layer in the stacking
order. The Z-INDEX, ABOVE and BELOW values are relative to sibling layers,
that is, other layers that have the same parent layer.
For an example of changing the stacking order or z order of layers, see
Chapter 11, "Swimming Fish Example."
----------------------------------------------------------------------------
----
VISIBILITY
<LAYER VISIBILITY=SHOW>
<LAYER VISIBILITY=HIDE>
<LAYER VISIBILITY=INHERIT>
visibility:show; /* css */
visibility:hide; /* css */
visibility:inherit; /* css */
The VISIBILITY parameter determines whether the layer is visible or not. A
value of HIDE hides the layer; SHOW shows the layer; INHERIT causes the
layer to have the same visibility as its parent layer. For top level layers
(that is, layers that are not nested inside other layers), a value of
INHERIT has the same effect as SHOW since the body document is always
visible.
By default, a layer has the same visibility as its parent layer, that is,
the value of the VISIBILITY attribute is INHERIT.
Remember that even if the visibility of a layer is set to SHOW, you will
only be able to see the layer if there are no other visible, opaque layers
stacked on top of it.
If the visibility of a relatively positioned layer is HIDE, the layer
contents are not shown, but the layer still takes up space in the document
flow.
For an example of making layers visible and invisible, see Chapter 10,
"Fancy Flowers Farm Example."
----------------------------------------------------------------------------
----
BGCOLOR and BACKGROUND-COLOR
<LAYER BGCOLOR="#00FF00">
<LAYER BGCOLOR="green">
background-color:green;
background-color:00FF00;
The BGCOLOR attribute and background-color style property determine the
solid background color of a block of HTML content, similar to the BGCOLOR
attribute of the <BODY> tag. The background color is either the name of a
standard color such as red or an RGB value, such as #334455 (which has a red
hexadecimal value of 33, a green hexadecimal value of 44 and a blue
hexadecimal value of 55.)
By default, a layer is transparent -- layers below it show through the
transparent areas of the layer's text and other HTML elements.
If a layer is defined with the <LAYER> tag, its background color is applied
to the rectangular region occupied by the layer. If a layer is defined as a
style, the background color is applied only to the actual content of the
layer, not to the entire region of the layer. If the style has a border, the
region enclosed by the border uses the background color, but this region is
still limited to the region that contains content. If the style specifies
width and height values that define a region larger than is needed to
display the content, the background color will only be applied to the area
inside the border, which will be drawn around the actual content.
Netscape Navigator 4.0 also supports a layer-background-color CSS style
property, which sets the background color of the entire layer, but this
property is not approved by the W3C.
This is really hard to explain in words, but is immediately obvious when you
see the results. To see an illustration of this point, click on:
bgtest.htm
----------------------------------------------------------------------------
----
BACKGROUND and BACKGROUND-IMAGE
<LAYER BACKGROUND="images/dogbg.gif">
background-image:url("images/dogbg.gif"); /* CSS */
The BACKGROUND attribute and background-image style property indicate a
tiled image to draw across the background of a block of HTML content. The
value is the URL of an image.
By default, a layer is transparent -- layers below it show through the
transparent areas of layer's text and other HTML elements.
Note that Netscape Navigator 4.0 also supports a layer-background-image CSS
style property, which sets the background color of the entire block that
uses the style, but this property is not approved by the W3C.
If a layer is defined with the <LAYER> tag, the background image is applied
to the rectangular region occupied by the layer. If a layer is defined as a
style, the background image is applied to the region that contains the
actual content of the layer. If the style specifies width and height values
that define a region larger than is needed to display the content, the
background image will only be applied to the area that encloses the actual
content.
Netscape Navigator 4.0 also supports a layer-background-image CSS style
property, which draws the image across the entire layer, but this property
is not approved by the W3C.
To see an illustration of this point, click on:
bgimage.htm
----------------------------------------------------------------------------
----
OnMouseOver, OnMouseOut
These attributes only apply to the <LAYER> tag.
<LAYER OnMouseOver="highlight(); return false;">
<LAYER OnMouseOut="dehighlight(); return false;">
These are event handlers. Their values must be functions or inline
JavaScript code. The onMouseOver handler is invoked when the mouse enters
the layer, and the onMouseOut handler is invoked when the mouse leaves the
layer.
For on example of using an onMouseOver handler, see Chapter 12, "Expanding
Colored Squares Example."
----------------------------------------------------------------------------
----
OnFocus, OnBlur
These attributes only apply to the <LAYER> tag.
<LAYER OnFocus="function1(); return false;">
<LAYER OnBlur="function2(); return false;">
These are event handlers. Their values must be functions or inline
JavaScript code. The onFocus handler is invoked the layer gets keyboard
focus, and the onBlur handler is invoked when the layer loses keyboard
focus.
----------------------------------------------------------------------------
----
OnLoad
This attribute only applies to the <LAYER> tag.
OnLoad="dosomething(); return false;"
This is an event handler. Its value must be a function or inline JavaScript
code. The onLoad handler is invoked when the layer is loaded, regardless of
whether the layer is visible or not.
For an example of setting the onLoad handler for a layer, see Chapter 11,
"Swimming Fish Example" and Chapter 12, "Expanding Colored Squares
Example.".
----------------------------------------------------------------------------
----
The <NOLAYER> Tag
If an HTML file that contains positioned blocks of HTML content is displayed
in a browser that does not know how to position content, the content is
displayed as if it was not positioned. If the file contains any scripts that
require layers functionality, they will generate JavaScript errors if loaded
into a browser that does not support positioning.
You can use the <NOLAYER> and </NOLAYER> tags to surround content that is
ignored by Netscape Navigator 4. This enables you to provide alternative
content that will be displayed by browsers that cannot position content. For
example:
<LAYER SRC=layerContent.html></LAYER>
<NOLAYER>
This page would show some really cool things if you had
a browser that can position content.
</NOLAYER>
----------------------------------------------------------------------------
----
Applets, Plug-ins, and Forms
Layers can contain form elements, applets, and plug-ins, which are known as
windowed elements. These elements are special in that they float to the top
of all other layers, even if their containing layer is obscured.
When a windowed element is moved to the edge of its containing layer, it
disappears as soon as one of its borders hits a border of the layer, instead
of seeming to glide out of view as non-windowed elements would do. For form
elements, it is the individual element that disappears on contact with the
border of the layer, not the entire form.
Note however, that windowed elements do move and change visibility in
accordance with their containing layer.
Forms cannot span layers. That is, you cannot have part of the form in one
layer and another part in another layer.
Communicator introduces windowless plug-ins, which are plug-ins that do not
pop to the top of the window and can be drawn below other items in the
window. Windowless plug-ins are discussed in the Plug-in guide.
Here's the URL for the Plug-in Guide:
/library/documentation/communicator/plugin/index.htm
To link to Chapter 1, "Plug-in Basics," which contains a section called
"Windowed and Windowless Plug-ins" see:
/library/documentation/communicator/plugin/pg1bas.htm
To link to Chapter 4, "Drawing and Event Handling," which contains a section
on general issues in writing windowless plug-ins, see:
/library/documentation/communicator/plugin/pg4dr.htm
----------------------------------------------------------------------------
----
[Contents] [Prev page] [Next page] [Index]
Last Updated: 08/07/97 15:21:59
----------------------------------------------------------------------------
----
Copyright © 1997 Netscape Communications Corporation
---
the fly on the net
webmaster di "the devil inside"
http://members.tripod.com/netfly
e-mail:
net...@netbusiness.it