Bonjour,
Je suis entrain de faire un menu avec des tabs horizontals.
Le code html:
======================================================
<html>
<head>
<title></title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body, td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.portletBdr {
border-right:solid 1px #580030;
border-left:solid 1px #580030;
border-bottom:solid 1px #580030;
}
.portletL-pad {
padding-left: 5px;
}
.mktgImg { margin: 0 0 10px 0; }
#mileP { margin: 10px 0 0 20px; }
#fareF { margin: 0 0 0 20px; }
#mid { width: 285px; margin: 0 0 0 10px; }
#mid div.fSale { margin: 0 0 10px 0; }
#btm { margin: 20px 0 0 10px; }
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
if (navigator.appVersion.indexOf("Win") != -1) {
if (document.layers){
document.write("<LINK REL=stylesheet TYPE='text/css' HREF='./newtab/ual_style_pc_n.css'>");
}
// NN4+
else if (document.all) {
document.write("<LINK REL=stylesheet TYPE='text/css' HREF='./newtab/ual_style_pc_e.css'>");
// MSIE4+
}
} else if (navigator.appVersion.indexOf("Mac") != -1) {
document.write("<LINK REL=stylesheet TYPE='text/css' HREF='./newtab/ual_style_mac.css'>");
} else {
// not a v 4 or +
}
//-->
</script>
<script language="JavaScript" src="./newtab/homepage.js" type="text/javascript"></script>
</head>
<!--- <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" link="#0033cc" alink="#000000" vlink="#0066ff" onLoad="TTADVS.pageOnLoad(); ADVS.pageOnLoad(); MM_preloadImages('./newtab/tab_FF_off.gif','./newtab/tab_CI_on.gif','./newtab/tab_CI2_off.gif','./newtab/tab_FS_on.gif','./newtab/tab_FS2_off.gif')"> --->
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" link="#0033cc" alink="#000000" vlink="#0066ff" onLoad="MM_preloadImages('./newtab/tab_FF_off.gif','./newtab/tab_CI_on.gif','./newtab/tab_CI2_off.gif','./newtab/tab_FS_on.gif','./newtab/tab_FS2_off.gif')">
<div id="fareF">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25" valign="top" bgcolor="#ffffff" nowrap><img src="./newtab/tab_FF_on.gif" name="n_FF" id="n_FF" alt="Search" border="0" width="96" height="40" onClick="f_chooseFF(this);"><img src="./newtab/tab_CI_off.gif" name="n_CI" id="n_CI" alt="Timetable" border="0" width="96" height="40" onClick="f_chooseCI(this);"><img src="./newtab/tab_FS_off.gif" name="n_FS" id="n_FS" alt="CheckMyTrips" border="0" width="96" height="40" onClick="f_chooseFS(this);"></td><!---- Do not go to the line, else display will be modified -->
<td width="7" rowspan="2" valign="top" id="portletRshadow"> </td>
</tr>
<tr>
<td height="500" align="center" valign="top" bgcolor="#ffffff" class="portletBdr">
<!------------------------------------------------------ First Tab --------------------------------------------------------------->
<div id="cntFareFinder" style="display: block;">
<table width="286" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="tbl_ECO">
<tbody>
<tr>
<td>
<!-------------- Module1 -------------------------------->
<!-------------- End module1 ------------->
</td>
</tr>
</tbody>
</table>
</div>
<!---------------------------------------------- End First Tab ---------------------------------------------------------->
<!----------------------------------------- 2nd Tab ---------------------------------------------------------------------->
<div id="cntCheckIn" style="display: none;">
<table width="286" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="tbl_ECO">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<!----------------------------------------- End 2nd Tab ------------------------------------------------------------------>
<!----------------------------------------- 3rd Tab ---------------------------------------------------------------------->
<div id="cntFlightStatus" style="display: none;">
<table width="286" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="tbl_ECO">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<!----------------------------------------- End 3rd Tab ------------------------------------------------------------------>
</td>
</tr>
</table>
</div>
</div>
<!---------------------- End div container --------------------------->
</body>
</html>
====================================================
Fichier JS:
======================================================
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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
// inserts backward compatible css background image support
//document.write('<link rel="stylesheet" href="./newtab/bg.css" type="text/css">');
function f_chooseFF(img) {
if(img.src.indexOf('on') == -1){
show('cntFareFinder');
hide('cntFlightStatus');
hide('cntCheckIn');
document.images['n_FF'].src = './newtab/tab_FF_on.gif';
document.images['n_FS'].src = './newtab/tab_FS_off.gif';
document.images['n_CI'].src = './newtab/tab_CI_off.gif';
}
}
function f_chooseCI(img) {
if(img.src.indexOf('on') == -1){
hide('cntFareFinder');
hide('cntFlightStatus');
show('cntCheckIn');
document.images['n_FF'].src = './newtab/tab_FF_off.gif';
document.images['n_FS'].src = './newtab/tab_FS2_off.gif';
document.images['n_CI'].src = './newtab/tab_CI_on.gif';
}
}
function f_chooseFS(img) {
if(img.src.indexOf('on') == -1){
hide('cntFareFinder');
show('cntFlightStatus');
hide('cntCheckIn');
document.images['n_FF'].src = './newtab/tab_FF_off.gif';
document.images['n_FS'].src = './newtab/tab_FS_on.gif';
document.images['n_CI'].src = './newtab/tab_CI2_off.gif';
}
}
function show (id) {
if (document.getElementById)
document.getElementById(id).style.display = 'block';
}
function hide (id) {
if (document.getElementById)
document.getElementById(id).style.display = 'none';
}
======================================================
J'aimerais garder le tab selectionner en memoire pour lorsque je reviens sur cette page, je ne choix pas obliger de recliquer dessus.
Dans quel direction je dois m'orienter?
Merci[/i]
Je suis entrain de faire un menu avec des tabs horizontals.
Le code html:
======================================================
<html>
<head>
<title></title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body, td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.portletBdr {
border-right:solid 1px #580030;
border-left:solid 1px #580030;
border-bottom:solid 1px #580030;
}
.portletL-pad {
padding-left: 5px;
}
.mktgImg { margin: 0 0 10px 0; }
#mileP { margin: 10px 0 0 20px; }
#fareF { margin: 0 0 0 20px; }
#mid { width: 285px; margin: 0 0 0 10px; }
#mid div.fSale { margin: 0 0 10px 0; }
#btm { margin: 20px 0 0 10px; }
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
if (navigator.appVersion.indexOf("Win") != -1) {
if (document.layers){
document.write("<LINK REL=stylesheet TYPE='text/css' HREF='./newtab/ual_style_pc_n.css'>");
}
// NN4+
else if (document.all) {
document.write("<LINK REL=stylesheet TYPE='text/css' HREF='./newtab/ual_style_pc_e.css'>");
// MSIE4+
}
} else if (navigator.appVersion.indexOf("Mac") != -1) {
document.write("<LINK REL=stylesheet TYPE='text/css' HREF='./newtab/ual_style_mac.css'>");
} else {
// not a v 4 or +
}
//-->
</script>
<script language="JavaScript" src="./newtab/homepage.js" type="text/javascript"></script>
</head>
<!--- <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" link="#0033cc" alink="#000000" vlink="#0066ff" onLoad="TTADVS.pageOnLoad(); ADVS.pageOnLoad(); MM_preloadImages('./newtab/tab_FF_off.gif','./newtab/tab_CI_on.gif','./newtab/tab_CI2_off.gif','./newtab/tab_FS_on.gif','./newtab/tab_FS2_off.gif')"> --->
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" link="#0033cc" alink="#000000" vlink="#0066ff" onLoad="MM_preloadImages('./newtab/tab_FF_off.gif','./newtab/tab_CI_on.gif','./newtab/tab_CI2_off.gif','./newtab/tab_FS_on.gif','./newtab/tab_FS2_off.gif')">
<div id="fareF">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25" valign="top" bgcolor="#ffffff" nowrap><img src="./newtab/tab_FF_on.gif" name="n_FF" id="n_FF" alt="Search" border="0" width="96" height="40" onClick="f_chooseFF(this);"><img src="./newtab/tab_CI_off.gif" name="n_CI" id="n_CI" alt="Timetable" border="0" width="96" height="40" onClick="f_chooseCI(this);"><img src="./newtab/tab_FS_off.gif" name="n_FS" id="n_FS" alt="CheckMyTrips" border="0" width="96" height="40" onClick="f_chooseFS(this);"></td><!---- Do not go to the line, else display will be modified -->
<td width="7" rowspan="2" valign="top" id="portletRshadow"> </td>
</tr>
<tr>
<td height="500" align="center" valign="top" bgcolor="#ffffff" class="portletBdr">
<!------------------------------------------------------ First Tab --------------------------------------------------------------->
<div id="cntFareFinder" style="display: block;">
<table width="286" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="tbl_ECO">
<tbody>
<tr>
<td>
<!-------------- Module1 -------------------------------->
<!-------------- End module1 ------------->
</td>
</tr>
</tbody>
</table>
</div>
<!---------------------------------------------- End First Tab ---------------------------------------------------------->
<!----------------------------------------- 2nd Tab ---------------------------------------------------------------------->
<div id="cntCheckIn" style="display: none;">
<table width="286" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="tbl_ECO">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<!----------------------------------------- End 2nd Tab ------------------------------------------------------------------>
<!----------------------------------------- 3rd Tab ---------------------------------------------------------------------->
<div id="cntFlightStatus" style="display: none;">
<table width="286" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="tbl_ECO">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<!----------------------------------------- End 3rd Tab ------------------------------------------------------------------>
</td>
</tr>
</table>
</div>
</div>
<!---------------------- End div container --------------------------->
</body>
</html>
====================================================
Fichier JS:
======================================================
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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
// inserts backward compatible css background image support
//document.write('<link rel="stylesheet" href="./newtab/bg.css" type="text/css">');
function f_chooseFF(img) {
if(img.src.indexOf('on') == -1){
show('cntFareFinder');
hide('cntFlightStatus');
hide('cntCheckIn');
document.images['n_FF'].src = './newtab/tab_FF_on.gif';
document.images['n_FS'].src = './newtab/tab_FS_off.gif';
document.images['n_CI'].src = './newtab/tab_CI_off.gif';
}
}
function f_chooseCI(img) {
if(img.src.indexOf('on') == -1){
hide('cntFareFinder');
hide('cntFlightStatus');
show('cntCheckIn');
document.images['n_FF'].src = './newtab/tab_FF_off.gif';
document.images['n_FS'].src = './newtab/tab_FS2_off.gif';
document.images['n_CI'].src = './newtab/tab_CI_on.gif';
}
}
function f_chooseFS(img) {
if(img.src.indexOf('on') == -1){
hide('cntFareFinder');
show('cntFlightStatus');
hide('cntCheckIn');
document.images['n_FF'].src = './newtab/tab_FF_off.gif';
document.images['n_FS'].src = './newtab/tab_FS_on.gif';
document.images['n_CI'].src = './newtab/tab_CI2_off.gif';
}
}
function show (id) {
if (document.getElementById)
document.getElementById(id).style.display = 'block';
}
function hide (id) {
if (document.getElementById)
document.getElementById(id).style.display = 'none';
}
======================================================
J'aimerais garder le tab selectionner en memoire pour lorsque je reviens sur cette page, je ne choix pas obliger de recliquer dessus.
Dans quel direction je dois m'orienter?
Merci[/i]