Layers

1
Lesson 7

• Layers

2
Netscape Layers

• Used to position a set of tags with the top and
  right attributes
• You can create layers by
• ltlayergt and ltilayergt tags
• ltdivgt and/or ltspangt tags
• Style sheet definition
• Creating document objects in Javascript

3
Layer and ilayer attributes
4
Layers example
lthtmlgt ltheadgt lttitlegtLayer Examplelt/titlegt lt/headgt
ltbodygt ltlayer top150 left50 width150
bgcolorlightbluegt This is a sample of a layer
tag. It is by default absolute and is 50 pixels
from the left side, 150 from the top and is 150
pixels wide lt/layergt ltlayer style"positionabsol
ute top100
left300 width100
colorred layer-background-colorye
llow"gt This is also an example of a layer with a
layer bachground specified. lt/layergt
5
What the sample looks like
6
Layer Objects

• As layers are added, they are placed in the
  layerName array (just like other HTML elements)
• layerName keeps track of the top-level layers
• each layer has it own DOM
• so you can nest layers
• this is sort of recursive as each of the nested
  layers has its own DOM and it own layersi array
• reference the layer by layerName
• document.layerName

7
Another example
lthtmlgt ltheadgt lttitlegtLogin Samplelt/titlegt ltstyle
type"text/css" gt loginlink positionabsolute
top100px left150px login
positionabsolute top100px left150px
visibilityhidden border-styleinset
border-width2px border-colorgray
lt/stylegt ltscript language"JavaScript"gt lt!--
start hiding function showLayer(layerName)
document.layerslayerName.visibility"visible"
document.loginlink.visibility"hide" function
hideLayer(layerName) document.layerslayerName
.visibility"hide" document.loginlink.visibili
ty"show" // --gt lt/scriptgt lt/headgt
8
Another example (cont.)
ltbodygt ltdiv idloginlinkgt lta href"javascriptshow
Layer('login')"gtLog in lt/agt lt/divgt ltdiv
id"login"gt lttable bgcolor"ffffff" border0
cellspacing0 cellpadding0gt lttrgt lttdgt
lth3gtPlease Log inlt/h3gt lt/tdgt
lttdgtnbsplt/tdgt lt/trgt ltform action"cgi-bin/search.
pl" methodpostgt lttrgt lttd valignmiddlegtUserid
ltinput typetext size30 nameuseridgtltbrgt
Password ltinput typetext size30
namepwordgtltbrgt ltinput typesubmit
valueSubmit onClick"hideLayer('login')"gtlt/tdgt
lt/trgt lt/formgt lt/tablegtlt/divgtlt/bodygt lt/htmlgt
9
The result...
10
More on the Layer Object

• Layers can be accessed by referring to the layers
  array
• document.layerslayerName
• also by index in the order of appearance
• document.layersindex
• the layer object has attributes just like othe
  HTML elements
• document.layerName.propertyName
• syntax for nested layers
• document.layerName.document.layername2.property
• changing a property value
• document.layerName.document.layername2.property
  value

11
Layer Events

• onMouseOver
• onMouseOut
• onFocus
• onBlur
• onLoad
• Layer scripts
• a Javascript function can be written explicitly
  for a layer by placing the script between the
  ltlayergt and lt/layergt tag for the specific layer

12
Finding out where you are...
All exents in the browser window generate
information about what occurred where it occurred
and how it occurred. If youve caught an event,
pass the event to the handler function
findXCoord() and findYCoord function
findXCoord(evt) if (evt.x) return evt.x
if (evt.pageX) return evt.pageX function
findYCoord(evt) if (evt.y) return evt.y
if (evt.pageY) return evt.pageY
13
Netscape Layer Methods

• moveBy(x,y) - move x pixels over and y pixels
  down
• moveTo(x,y) - move to the specified position
  within its containing layer or document
• moveToAbsolute(x.y) - move the layer to the
  specified coordintate within the document
• resizeBy(x,y) - resize x pixels to right and y
  pixeld down
• resizeTo(x,y) - resize to x pixels by y pixels
• moveAbove(layer) - move the layer above the
  specified layer
• moveBelow(layer) - move the layer below the
  specified layer
• load(URL, width)

14
For Browsers that dont support layers

• ltnolayergt.lt/nolayergt
• place an anchor tag to the content between
  ltnnolayergt and lt/nolayergt tags

15
In Lab

• Examine the dragdrop.html example on the class
  web site
• Modify it to add another layer containing some
  small graphic
• add JavaScript that will pop up an alert box when
  you drag one object and drop it on the other
  object
• add additional objects, identify the objects in
  the alert box