DHTML : Rollover Text
Sékine Coulibaly
Interaction!
Our page body and browser detection block are now ready. We must now define our layers and the associated code needed to activate
them.
This is purely a matter for HTML. Your layers can contain any elements, including Java applets.
You just need to define the required elements between the
<DIV> and
</DIV> tags. Each layer is assigned an identifier using the
ID= attribute. Do not worry about style for the moment. We will take care of that very soon, in another workshop.
Add the following lines to your page between the
<BODY> and
</BODY> tags:
<!-- We start by creating the layers -->
<DIV id="Calque1" style = "position:absolute; width:150;
height:50; left:20; top:40; z-index:0;
visibility:hidden;background-color:rgb(200,210,250)">
Where did the idea of creating Zeppelins come from?
</DIV>
<DIV id="Calque2" style = "position:absolute; width:150;
height:50; left:20; top:40; z-index:0;
visibility:hidden;background-color:rgb(130,150,250)">
The most famous Zeppelins!
</DIV>
<DIV id="Calque3" style = "position:absolute; width:150;
height:50; left:20; top:40; z-index:0;
visibility:hidden;background-color:rgb(80,110,250)">
he tragedies that put an end to Zeppelins.
</DIV>
The layers' visibility property. The
visibility property of the layers is first set as
hidden. This means that our layers will not be visible after the page loading.
Now let's see how to activate and deactivate their display.