Layers & Behaviours Tutorial
- Ensure that the 'Layers' and 'Behaviours' task panes are visible.
If not, go to the 'Task Panes' menu and enable
- Insert a new layer. Go to the 'Insert' menu, select
'HTML' then 'layer'
- Write a word into the layer (the word will act as a link
and a mouse over button). Repeat the process until you have created
all the buttons you need.
* Layers are positioned absolutely: you may drag them to any position you like on the page.
- Create a new layer and position it relative to the
buttons. Click to put the cursor inside the new layer. Insert an
image into the layer
(insert menu > picture > from file > )
- Select the layer containing the image the double click
the layer id in the layers task pane. Rename the layer. Use a
name that will help you remember the layer's contents. Do not use
spaces in id names, use underscores or dashes.
- Under the 'layer visibility' (eye) icon in the layers
task pane, double click next to the image layer. Click twice, until
the image layer is hidden (a closed eye will be displayed)
- Select the layer you wish to act as a button.
Select the 'behaviours' task pane. Click the 'insert' button and
select 'change property'
- Select the radio button marked 'select element' then
select the id of the layer containing the image. Click the 'visibility
button' and select 'visible'. Tick the 'restore on mouseout event'
checkbox.
- The event you have just defined will now appear on the
behaviours task pane. Under event, select 'onmouseover' from the drop
down list.
- Preview the page in a browser. You will find that the image appears when you mouse over the word.
- Repeat the process for all the text labels, so that each displays a different image on mouseover.
