|
|
Add the following points to web
page
Notes
|
 |
|
1. |
Folder
'expand_collapse_files' stores one file -
annonce.css and 2 pictures - (Minus.gif and
Plus.gif) |
2. |
- from Table menu, select
Insert and then select Table ... , the Insert Table
dialog box appears, (size coordinates: 1 row and 1
Column) and then click ok. New Table display
- at Normal Source, into the
cell of this table, type 'A' and select
it
- at HTML source, appears the place
selected at the previous point ( letter 'A' typed and
selected at Normal Source)
<table border="1"
cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="100%"
id="AutoNumber1"> <tr> <td
width="100%">A</td> </tr> </table>
- at HTML source, replace the
previous HTML test by the following
HTML test, (color of old text - red, color of new text - black)
<table border="1" cellpadding="0"
cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="100%"
id="AutoNumber1"> <tr> <td
width="100%"> <TABLE
class=infotable borderColor=#111111 cellSpacing=0
cellPadding=2 width="97%" border=0> <TR
class=row> <TD class=content
style="BACKGROUND-COLOR: #cecf9c"
bgColor=#111111> <TABLE
style="BORDER-COLLAPSE: collapse"
borderColor=#111111 cellSpacing=0 cellPadding=0
width="100%" bgColor=#cecf9c
border=0> <TBODY> <TR> <TD
align=middle width="3%"><FONT face="Times
New Roman" size=2> <IMG class=expandable
onclick=changepic() height=20 alt="expand/collapse
section" src="expand_collapse_files/Plus.gif"
width=16 child="issue0"></FONT></TD>
<TD width="10%" align="center"><FONT size=2 face="Times
New Roman"> <u>
<strong class="expandable" style="FONT-STYLE: italic"
onclick="changepic()" child="issue0" height alt src
width>
Continue </strong></u></FONT></TD> <TD
width="87%"> <font size="2">Title: Expand
& Collapse cell ...</font></TD>
</TR></TBODY></TABLE></TD></TR> <TR
class=collapsed id=issue0
bgColor=#ffffff> <TD width="100%"
bgColor=#e7e7ce> Text, Text, Text ...</TD></TR></TABLE> </td> </tr> </table> |
Note:
every expand/collapse section has same value
of variables: child,
id
multi expand/collapse sections have multi values
of
variables |
3. |
at HTML Source of web page
add this Javascript text
<SCRIPT language=javascript> //Expand and
Collapse section <!-- function dynAnimation()
{} function clickSwapImg() {}
function
MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc; }
function MM_preloadImages() {
//v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new
Array(); var
i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++) if (a[i].indexOf("#")!=0){
d.MM_p[j]=new Image;
d.MM_p[j++].src=a[i];}} }
function MM_findObj(n, d)
{ //v4.0 var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{ d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);} if(!(x=d[n])&&d.all)
x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document); if(!x &&
document.getElementById) x=document.getElementById(n); return
x; }
function MM_swapImage() { //v3.0 var
i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3) if
((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //
-->
<!-- function outliner () { oMe =
window.event.srcElement //get child element var child =
document.all[event.srcElement.getAttribute("child",false)]; //if
child element exists, expand or collapse it. if (null !=
child) child.className = child.className == "collapsed" ?
"expanded" : "collapsed"; }
function changepic()
{ uMe = window.event.srcElement; var check =
uMe.src.toLowerCase(); if (check.lastIndexOf("plus.gif") !=
-1) { uMe.src =
"expand_collapse_files/Minus.gif" } else { uMe.src
=
"expand_collapse_files/Plus.gif" } } //-->
</SCRIPT>
Note:
this JavaScript text stores the names and folder of
pictures use to expand/collapse
section |
4. |
at HTML source,
replace the HTML text - <META
content="Microsoft FrontPage 5.0" name=GENERATOR>
by the HTML text : <META
content="Microsoft FrontPage 5.0"
name=GENERATOR> <LINK
href="expand_collapse_files/annonce.css" type=text/css
rel=stylesheet>
Note:
color of old text - red, color of
new text - black |
5.
|
at HTML source,
replace the HTML text - <BODY >
by this HTML text : <BODY onclick=outliner()>
Note:
color of old text - red, color of
new text - black |
|
| | |