<!--
The code is divided into 3 parts:
1st part is Javascript
2nd part is a style sheet (can be replaced or deleted...)
3rd part is the php code
these three parts shall be put before <BODY>
in your HTML page, use the following function to make a window:
<?php //begining of the window
//faitcadredebut("thenameofmywindow_unique","title of the window", width); ?>
here put the html code you want to be inside your window (even another window!)
<?php //end of the window
//faitcadrefin(); ?>
please see the example to see the images to download
------------------1st part----------------
Javascript: show/hide border and contents
put this first javascript before <BODY>
-->
<script language="JavaScript">
var blnBorder = false;
function setBorder(id,bOn)
{
var oTab = document.all.item(id+"Tab");
var oTab1 = document.all.item(id+"Tab1");
var oTab2 = document.all.item(id+"Tab2");
var oTab3 = document.all.item(id+"Tab3");
var oBorder = document.all.item(id+"Content");
if (!oTab || !oTab1 || !oTab2 || !oTab3 || !oBorder)
return;
if (bOn)
{
oBorder.style.borderColor = "#990033";
oTab.bgColor = "#990033";
oTab1.src = "http://www.meshoraires.com/endevlpt/curve_mo2.gif";
oTab2.color = "#ffffee";
if (oBorder.style.display == "none")
oTab3.src = "http://www.meshoraires.com/endevlpt/expand_mo.gif";
else
oTab3.src = "http://www.meshoraires.com/endevlpt/collapse_mo.gif";
}
else
{
oBorder.style.borderColor = blnBorder? "#cccccc" : "#ffffff";
oTab.bgColor = "#CCCCCC";
oTab1.src = "http://www.meshoraires.com/endevlpt/curve.gif";
oTab2.color = "#004000";
if (oBorder.style.display == "none")
oTab3.src = "http://www.meshoraires.com/endevlpt/expand.gif";
else
oTab3.src = "http://www.meshoraires.com/endevlpt/collapse.gif";
}
}
function showHideContent(id,bOn)
{
var bMO = false;
var oContent = document.all.item(id+"Content");
if(oContent.style.display != "none")
{
oContent.style.display = "none";
} else {
oContent.style.display = "";
};
}
</script><!--
------------------2nd part----------------
style sheet (just an exemple, feel free to
replace by your own)
put this script before <BODY>
-->
<style type="text/css">
<!--
body {
color : #000000;
background-color : white;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
}
P, TABLE, TD {
color : #000000;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
}
input { font-family: Default;font-weight : normal;font-size : 10pt;}
.largetxt {font-size : 12px;}
.header {
background-color : #000000;
}
.menu {
color : white;
background-color : #B00025;
}
a.lienmenu {color : white;
text-decoration : none;}
a.lienmenu:hover {color : #E9E9E9;}
.menuclair {
background-color : #FFFFFF;
}
.menumedium {
background-color : #C05A61;
}
.menufonce {
background-color : #74061E;
}
.blocfond {color : #000000;
background-color : #E9E9E9;
}
a.lienblocfond {color:#000000;text-decoration:none;}
a.lienblocfond:hover {color:#B00025;
}
.bloctitre {
color : #000000;
background-color : #EFD9AF;font-weight : bold;
border-bottom: 1px solid White; border-top: 1px solid White;
}
a.lienbloctitre {color:#000000; text-decoration:none; font-weight : bold;}
a.lienbloctitre:hover {color:#B00025;
}
.fondtitre {
color : #000000;
background-color : #FAF4EA;
}
.titre1 {color : #000000; font-size : 20px;}
.titre1 EM {font-weight : bold;font-style : normal;}
.titre2 {color : #000000; font-size : 16px;}
.titre2 EM {font-weight : bold;font-style : normal;}
.titre3 {color : #000000; font-size : 12px; font-weight : bold;}
.titre4 {color : #B00025; font-size : 12px; font-weight : bold;}
.fondcol {background-color : #E9E9E9;}
.fondpage {background-color : white;}
a {color:#B00025;
text-decoration:none;
}
a:hover {color:#000000;
}
a.entete {text-decoration:underline;
color:#000000;
}
/*
img.puce1 {display : none;}
img.puce2 {display : none;}
img.flechecat {display : none;}
img.flechelien {display : none;} */
//
-->
</style>
<!------------------3rd part----------------
code to create the frames
in French,
"fait" means make
"cadre" means frame
"debut" means start
"fin" means end
put this script before <BODY>
-->
<?php
/////////////////////////////
// faitcadredebut
////////////////////////////////
function faitcadredebut($nomcadre,$titre,$taille){ ?> <DIV id="<?php echo $nomcadre; ?>HLHolder" style="DISPLAY: none; HEIGHT: 0px"></DIV>
<DIV id="<?php echo $nomcadre; ?>HL" onmouseover="setBorder('<?php echo $nomcadre; ?>HL',true);" onmouseout="setBorder('<?php echo $nomcadre; ?>HL',false);">
<table width="<?php echo $taille; ?>px" border="0" cellpadding="0" cellspacing="0px"><tr><td><table class="<?php echo $nomcadre; ?>Tab" width="100%" border="0" cellpadding="0" cellspacing="0" style="cursor:hand" onmouseover="setBorder('<?php echo $nomcadre; ?>HL',true);" onmouseout="setBorder('<?php echo $nomcadre; ?>HL',false);"><tr id="<?php echo $nomcadre; ?>HLTab" valign="middle" bgcolor="#CCCCCC"><td align="right"><img id="<?php echo $nomcadre; ?>HLTab1" src="http://www.meshoraires.com/endevlpt/curve.gif" alt="" border="0" /></td><td align="left" width="100%" height="10"><font id="<?php echo $nomcadre; ?>HLTab2" face="verdana,arial,helvetica" size="1" color="#004000">
<B><?php echo $titre; ?></B>
</font>
</td>
<td align="left"><img id="<?php echo $nomcadre; ?>HLTab3" src="http://www.meshoraires.com/endevlpt/collapse.gif" alt="" border="0" style="cursor:hand;" onClick="showHideContent('<?php echo $nomcadre; ?>HL',true);" /></td></tr></table>
<div id="<?php echo $nomcadre; ?>HLContent" style="display='none';width:100%;border-bottom:#000000 1px solid;border-left:#ffffff 1px solid;border-right:#ffffff 1px solid;">
<table cellspacing="0" cellpadding="0" border="0" BGCOLOR="#fff7d7" width="100%" >
<tr>
<td colspan="3" height="5" />
</tr>
<tr>
<td valign="TOP"></td>
<td width="3px"></td>
<td><font face="verdana,arial,helvetica" size="1">
<?php };
/////////////////////////////
// faitcadrefin
////////////////////////////////
function faitcadrefin(){ ?> </font>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</DIV>
</DIV><?php
}
?>
|
|