Barre de Navigation
sources code / source data / code page / exemple
--------------------
code
exemple :
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>....
<style type=text/css>#item { LEFT: 0px; POSITION: absolute; VISIBILITY: hidden}</style>
<!-- barre de navigation pour Francis -->
<!-- Copyright (c) 2001 - Systagrowth -->
<!-- mailto:systagrowth@advalvas.be -->
<script language=JavaScript>
/* Déclarations et définitions globales */
<!-- Begin
var isNS=(document.layers);
var _all=(isNS)? '' : 'all.' ;
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';
var w_x, w_y, item, okscroll=false, godown;
// convert all characters to lowercase to simplify testing
var agt=navigator.userAgent.toLowerCase();
// *** BROWSER VERSION ***
// Note: On IE5, these return 4, so use is_ie5up to detect IE5.
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
// Note: Opera and WebTV spoof Navigator. We do strict client detection.
// If you want to allow spoofing, take out the tests for opera and webtv.
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
&& (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
var is_nav2 = (is_nav && (is_major == 2));
var is_nav3 = (is_nav && (is_major == 3));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav4up = (is_nav && (is_major >= 4));
var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) ||
(agt.indexOf("; nav") != -1)) );
var is_nav6 = (is_nav && (is_major == 5));
var is_nav6up = (is_nav && (is_major >= 5));
var is_gecko = (agt.indexOf('gecko') != -1);
var is_NE_like,is_IE_like=false;
if ((document.layers || !(document.all)) && (!(document.body) || (self.innerWidth))) is_NE_like = true;
else is_NE_like =false;
if (((document.all) || !(document.layer))&& ((document.body) || ! (self.innerWidth))) is_IE_like=true;
else is_IE_like =false;
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5")==-1) );
var is_ie4up = (is_ie && (is_major >= 4));
var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5_5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);
var is_kqr = ((agt.indexOf("konqueror") != -1) );
// KNOWN BUG: On AOL4, returns false if IE3 is embedded browser
// or if this is the first browser window opened. Thus the
// variables is_aol, is_aol3, and is_aol4 aren't 100% reliable.
var is_aol = (agt.indexOf("aol") != -1);
var is_aol3 = (is_aol && is_ie3);
var is_aol4 = (is_aol && is_ie4);
var is_aol5 = (agt.indexOf("aol 5") != -1);
var is_aol6 = (agt.indexOf("aol 6") != -1);
var is_opera = (agt.indexOf("opera") != -1);
var is_opera2 = (agt.indexOf("opera 2") != -1 || agt.indexOf("opera/2") != -1);
var is_opera3 = (agt.indexOf("opera 3") != -1 || agt.indexOf("opera/3") != -1);
var is_opera4 = (agt.indexOf("opera 4") != -1 || agt.indexOf("opera/4") != -1);
var is_opera5 = (agt.indexOf("opera 5") != -1 || agt.indexOf("opera/5") != -1);
var is_opera5up = (is_opera && !is_opera2 && !is_opera3 && !is_opera4);
var is_webtv = (agt.indexOf("webtv") != -1);
var is_TVNavigator = ((agt.indexOf("navio") != -1) || (agt.indexOf("navio_aoltv") != -1));
var is_AOLTV = is_TVNavigator;
var is_hotjava = (agt.indexOf("hotjava") != -1);
var is_hotjava3 = (is_hotjava && (is_major == 3));
var is_hotjava3up = (is_hotjava && (is_major >= 3));
// *** JAVASCRIPT VERSION CHECK ***
var is_js=0;
if (is_nav2 || is_ie3) is_js = 1.0;
else if (is_nav3) is_js = 1.1;
else if (is_opera5up) is_js = 1.3;
else if (is_opera) is_js = 1.1;
else if ((is_nav4 && (is_minor <= 4.05)) || is_ie4) is_js = 1.2;
else if ((is_nav4 && (is_minor > 4.05)) || is_ie5) is_js = 1.3;
else if (is_hotjava3up) is_js = 1.4;
else if (is_nav6 || is_gecko) is_js = 1.5;
// NOTE: In the future, update this code when newer versions of JS
// are released. For now, we try to provide some upward compatibility
// so that future versions of Nav and IE will show they are at
// *least* JS 1.x capable. Always check for JS version compatibility
// with > or >=.
else if (is_nav6up) is_js = 1.5;
// NOTE: ie5up on mac is 1.4
else if (is_ie5up) is_js = 1.3
else if (is_NE_like || is_IE_like)
{is_js=1.2;alert('email me your browser type and the javaversion of it please ');}
// assuming I can handle those new browsers IE and NE look alike but not sure
var can_handle=((is_js>=1.2) && (!is_nav6up ));
var ver = navigator.appName;
var num = parseInt(navigator.appVersion);
function init(){
item=eval('document.'+_all+'item'+_style);
getwindowsize();
item.visibility=_visible;
scrollpage();
}
function getwindowsize() {
w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
w_y=(isNS)? window.innerHeight : document.body.clientHeight;
(isNS)? item.clip.width=450: item.width=490;
(isNS)? item.clip.height=40 : item.height=40;
moveitem();
}
function resizeNS() {
setTimeout('document.location.reload()',10);
}
function moveitem() {
if (isNS) {
item.moveTo((pageXOffset+w_x-450),(w_y+pageYOffset-40))
}else{
item.pixelLeft=document.body.scrollLeft+w_x-490;
item.pixelTop=w_y+document.body.scrollTop-40;
}
}
window.onload=init;
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
function scrollpage() {
status = '';
if (okscroll) {
if (godown) {
(isNS)? window.scrollBy(0,2) : window.scrollBy(0,2) ;
} else {
(isNS)? window.scrollBy(0,-2) : window.scrollBy(0,-2) ;
}
}
moveitem();
setTimeout('scrollpage()', 01);
}
window.onload=init;
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
function scrollpage() {
status = '';
if (okscroll) {
if (godown) {
(isNS)? window.scrollBy(0,2) : window.scrollBy(0,2) ;
} else {
(isNS)? window.scrollBy(0,-2) : window.scrollBy(0,-2) ;
}
}
moveitem();
setTimeout('scrollpage()', 01);
}
// End -->
</script>
</head>
<body>
<div id=item>
<a href="../navigation/navihelp.html" onmouseout="okscroll=false" onmouseover="okscroll=false"
onclick="window.open('../navigation/navihelp.html', 'help','width=415,height=490,resizable=yes,scrollbars=yes'); return false;"
target="help">
<img SRC="../navigation/question.gif" ALT="aide" BORDER=0 USEMAP="#aide" HSPACE=3 height=20 width=20></a><a href="../navigation/menusite.html" onmouseout="okscroll=false" onmouseover="okscroll=false"
onclick="window.open('../navigation/menusite.html', 'mnusite','width=415,height=490,resizable=yes,scrollbars=yes'); return
false;" target="menu">
<img SRC="../navigation/menu.gif" ALT="menu" BORDER=0 USEMAP="#menu" HSPACE=3 height=20 width=20></a><a href="javascript:window.history.go(-1)" onmouseout="okscroll=false" onmouseover="javascript:window.history.go(-1)">
<img SRC="../navigation/trianglevg.gif" ALT="back" BORDER=0 USEMAP="#back" HSPACE=3 height=20
width=20></a><a href="#top" onmouseout="okscroll=false" onmouseover="okscroll=true; godown=false">
<img SRC="../navigation/trianglevh.gif" ALT="up page vers haut" BORDER=0 HSPACE=3 height=20 width=20></a><a href="#bottom" onmouseout="okscroll=false" onmouseover="okscroll=true; godown=true">
<img SRC="../navigation/trianglevb.gif" ALT="down page vers le bas" BORDER=0 HSPACE=3 height=20 width=20></a><a href="javascript:window.close" >
<img SRC="../navigation/close.gif" ALT="Close this window" usemap="handicap" BORDER=0 HSPACE=3 height=20
width=20></a><a href="color.htm" target="_top2">
<img SRC="../navigation/topscreen.gif" ALT="full screen top window" usemap="handicap" HSPACE=3 BORDER=0
height=20 width=20></a><a href="../navigation/handicap.html" onmouseout="okscroll=false" onmouseover="okscroll=false"
onclick="window.open('../navigation/handicap.html', 'typo','width=415,height=490,resizable=yes,scrollbars=yes'); return false;"
target="handicap">
<img SRC="../navigation/handicap.gif" ALT="handicap navigation bar active" usemap="handicap" BORDER=0 HSPACE=3
height=20 width=20></a>
</div>
le reste de la page ....
</body>
Data
Par facilité le code peut également être placé en argument pour des fonctions java
ceci allège considérablement la taille du fichier et utilise les caches ....exemple :
"http://www.a-nous-la-liberte.org/js/navbar.js"
qui charge toutes les fonctions avant la balise </head>"http://www.a-nous-la-liberte.org/js/inclusioncodenavbar.js"
elle inscrit les arguments dans le corps du document
function flotnavbar()
{
if (can_handle){
document.writeln('<style type=text/css>#item { LEFT: 0px; POSITION: absolute; VISIBILITY: hidden}</style>');
document.writeln(' <div id=item>');
document.write('<a href="http://www.hippotherapy.be/navigation/navihelp.html" target="help">');
document.writeln('<img SRC="http://www.hippotherapy.be/navigation/question.gif" ALT="aide" BORDER=0 USEMAP="#aide" HSPACE=3 height=20 width=20></a>');
document.writeln ('<!-- rien --> ');
document.writeln('<a href="http://www.hippotherapy.be/plan.htm#debut" target="menu">');
document.writeln('<img SRC="http://www.hippotherapy.be/logosipo3api/sitemap.gif" ALT="plan du site" BORDER=0 HSPACE=3 height=20 width=20></a>');
document.writeln ('<!-- rien --> ');
document.writeln('<a href="javascript:window.history.go(-1)">');
document.writeln('<img SRC="http://www.hippotherapy.be/navigation/trianglevg.gif" ALT="back" BORDER=0 USEMAP="#back" HSPACE=3 height=20 width=20></a>');
document.writeln ('<!-- rien --> ');
document.writeln('<a href="#top" onmouseout="okscroll=false" onmouseover="okscroll=true; godown=false">');
document.writeln('<img SRC="http://www.hippotherapy.be/navigation/trianglevh-inac.gif" ALT="up page vers haut" BORDER=0 HSPACE=3 height=20 width=20></a>');
document.writeln ('<!-- rien --> ');
document.writeln('<a href="#bottom" onmouseout="okscroll=false" onmouseover="okscroll=true; godown=true">');
document.writeln('<img SRC="http://www.hippotherapy.be/navigation/trianglevb-inac.gif" ALT="down page vers le bas" BORDER=0 HSPACE=3 height=20 width=20></a>');
document.writeln ('<!-- rien --> ');
document.writeln('<a href="javascript:self.close()" onClick="self.close()">')
document.writeln('<img SRC="http://www.hippotherapy.be/navigation/close.gif" ALT="Close this window" usemap="handicap" BORDER=0 HSPACE=3 height=20 width=20></a>');
document.writeln('<!-- cette page en top window defaut : index.htm --> ');
document.writeln('<a href="#" onclick="document.location.pathname" target="_top_2">');
document.writeln('<img SRC="http://www.hippotherapy.be/navigation/topscreen.gif" ALT="full screen top window" usemap="handicap" HSPACE=3 BORDER=0 height=20 width=20></a>');
document.writeln ('<!-- rien --> ');
document.writeln('<a href="#" onclick="impression()">');
document.writeln('<img SRC="http://www.hippotherapy.be/navigation/printo.gif" ALT="print it" BORDER=0 USEMAP="#back" HSPACE=3 height=20 width=20></a>');
document.writeln ('<!-- rien --> ');
document.writeln('<a href="#" onclick="mailframe()">');
document.writeln('<img SRC="http://www.hippotherapy.be/navigation/sendto.gif" ALT="mail it" BORDER=0 USEMAP="#back" HSPACE=3 height=20 width=20></a>');
document.writeln ('<!-- rien --> ');
document.writeln('<a href="http://www.hippotherapy.be/ipo3api.htm#debut" onmouseout="okscroll=false" onmouseover="okscroll=false" target="index">');
document.writeln('<img SRC="http://www.hippotherapy.be/logosipo3api/info.gif" ALT="retour menu général" usemap="index" BORDER=0 HSPACE=3 height=20 width=20></a>');
document.writeln ('<!-- rien --> ');
document.writeln(' <a HREF="http://www.hippotherapy.be/adresses/chat.html" target="chat" onclick="window.open(\'http://www.hippotherapy.be/adresses/chat.html\',\'width=700,height=250,resizable=no,scrollbars=yes\'); return false"><img SRC="http://www.hippotherapy.be/logosipo3api/chat.gif" NOSAVE="nosave" BORDER=0 height=20 width=20 align=ABSCENTER alt="chat @t hippotherapy"></a>');
document.writeln('<a href="http://web.icq.com/91518297" target="ICQ"><img SRC="http://wwp.icq.com/scripts/online.dll?icq=91518297&img=9" ALT="My curent ICQ Status" height=20 width=55 nosave="nosave"></a> ');
document.writeln('<a href="javascript:remember_url(\'http://www.hippotherapy.be/navigation/b-style.html\')" onmouseout="okscroll=false" onmouseover="okscroll=false">');
document.writeln('<img SRC="http://www.hippotherapy.be/navigation/style.gif" ALT="Style & CSS" usemap="handicap" BORDER=0 height=20 width=60></a>');
document.writeln('</div>');
}
}
La meme procedure peut être utilisée pour d'autres entetes récurrents...
La page qui utilise le script
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Tillemans Francis">
<meta name="GENERATOR" content="Mozilla/4.7 [fr] (Win98; I) [Netscape]">
<title>demo page</title>
<script language="javascript" type="text/javascript" src="../../js/navbar.js"></script>
<script language="javascript" type="text/javascript" src="../../js/inclusioncodenavbar.js"></script>
<script language="javascript" type="text/javascript" src="../../js/entete.js"></script>
<script language="javascript" type="text/javascript" src="niveauacces.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript" >flotnavbar ()</script>
<!-- begin of the real page here --><a NAME="ACCESSIBLES"></a>
<!-- begin of the real page here --><a NAME="TOP"></a>
<script language="javascript" type="text/javascript" >incentete()</script>
....
le reste de votre page</body>
</html>