Design  | SFC  |  NOS  |  Code |  Diary  | WWW |  Essay |  Cisco | [Home]

 

 

[Bill's Home]

WWW pages


Hiding and unhiding layers on a graphic
A great trick with layers is to make the layer invisible by default, and then use a graphic rollover to make it appear. The JavaScript events which can produce this are:
onMouseOver() - which is used to make the layer visible. In Dreamweaver this is achieved by selecting the graphic, and then selecting the Show-Hide Layers in the Behaviors window. After this the layer is defined as Show.
onMouseOut() - which is used to make the layer invisible again. In Dreamweaver this is achieved by selecting the graphic, and then selecting the Show-Hide Layers in the Behaviors window. After this the layer is defined as Hide.
The JavaScipt produce is:
<a href="javascript:;"
onMouseOver=
"MM_showHideLayers ('Layer1','','show')"
onMouseOut=
"MM_showHideLayers ('Layer1','','hide')">
<img src="pics_bulb.gif" width="60" height="80" border="0"> </a>
Click on graphic to view code
 
 

 

 

 

 

WWW pages of the past

Aug 2001 (Pt IV)

Where can I start? In-between writing, I've been doing the odd little experiment with WWW pages. I think that in order to catch a user's interest, you've got to provide some 'eye-anchors', which stop the user from browsing, and to actually read the content. So I've modified my essays page so that I've got some animation and also I've added a banner to the pages.

The animations are produced in Flash, and here are a few:

I've actually also caught up with technology, as I've started to implement my designs using layers. They make design so much easier and you can do lots of really interesting things with them. The one I like is to make a layer invisible, and then use a JavaScript rollover to make it visible. This type of effect is used on many sites, and is especially good for changing graphics content. For example, roll your mouse over the following graphic: