Voici les standards appliqués sur le site de Mitan.ca. Les codes présentés sur ces pages
sont le résultat de recherches sur différents sites Internet. Ils sont du domaine publique.
Le Webmestre de Mitan ne revendique donc aucun droit intellectuel ou autre sur
ces codes tout comme il n'accepte aucune responsabilité quant à leur fonctionnement
et/ou utilisation sur d'autres sites.
|
|
Page 1 de 4 |
| 1 |
2
| 3
| 4 |
|
IMPORTANT
NOTE 1:
Sur ce site, un lien précédé d'un
 pictogrammes
indique que le lien va ouvrir une nouvelle fenêtre qui n'écrasera pas la page en cours.
Par conséquent, un lien sans pictogramme ouvrira une nouvelle fenêtre qui
écrasera la page en cours.
NOTE 2:
La
feuille de style (CSS) et la feuille de Javascript
de Mitan peuvent être consultées ou téléchargées sur les liens suivants.
Vous devez cependant posséder au moins FrontPage sur votre ordinateur
pour les consulter.
Cliquer sur les liens suivants pour
les télécharger :
Feuille de styles de Mitan (CSS)
Feuille des Javascripts de Mitan
NOTE 3:
Sauf indication contraire, tous les codes qui suivent ont été testés et sont entièrement
compatibles avec Netscape et Internet Explorer.
1 - LIENS AVEC PICTOGRAMMES
Voici les liens avec pictogrammes utilisés sur ce site. La nouvelle fenêtre
ouverte par ces liens n'écrasera pas la page en cours.
1.1 - LIEN POUR UNE PAGE HTLM
 Placé devant un lien, ce pictogramme indique que le lien va ouvrir une
nouvelle fenêtre contenant une page
interne ou
externe.
Voici le code à utiliser dans le lien pour
ouvrir une page interne:
<a href="/genealogie/ascendance.htm" title="Ascendance Bouchard"
target="newframe">
<img src="/picto/pagesite.gif" title="Ouvrir la page" width="12" height="10"
hspace="3" border="0">
Voici le code à utiliser dans le lien pour
ouvrir une page externe:
<a href="http://www.ulaval.ca" title="Université Laval - Québec"
target="newframe">
<img src="/picto/pagesite.gif" title="Ouvrir le site" width="12" height="10"
hspace="3" border="0">
Notez l'instruction
target="newframe"
dans le code du lien: cette instruction force le navigateur à ouvrir une nouvelle fenêtre
avec tous ses paramètres par défaut qui
n'écrasera pas
la page courante.
1.2 - LIEN POUR UNE IMAGE
Placé devant un lien, ce pictogramme indique que le lien fera apparaître
une
photo ou une image dans une nouvelle fenêtre.
Voici le code à utiliser dans le lien:
<a href="/photos/avion2.jpg" title="Photo d'une avion" target="newframe">
<img src="/picto/pagephoto.gif" title="Voir la photo" width="12" height="10"
hspace="3" border="0">photo ou une image</a>
NOTE : D'autres méthodes plus sophistiquées
permettant de positionner l'image, de modifier l'apparence de la page et
ajouter du texte descriptif sont montrées plus
bas sur cette page à l'item
3 - LIENS SPÉCIALISÉS.
1.3 - LIEN POUR UN ENREGISTREMENT AUDIO
Placé devant un lien, ce pictogramme indique que le lien fera entendre un
enregistrement audio.
Voici le code à utiliser dans le lien:
<a href="../voyages/idlm02/audio/chant-du-sable.wav"
title="Les pas sur la plage">
<img src="/picto/pageaudio.gif" title="Écouter l'enregistrement" height="10"
width="12" hspace="3" border="0">
1.4 - LIEN POUR UN DOCUMENT EXPLICATIF
Placé devant un lien, ce pictogramme indique que le lien fera
apparaître un
document.
Voici le code à utiliser dans le lien:
<a href="../conventum/photos/conventum_02/cv_parent_lp_deces.jpg"
title="Avis de décès" target="newframe">
<img src="/picto/pagetexte.gif" title="Lire le texte" height="10"
width="12" hspace="3" border="0">
NOTE : D'autres méthodes plus sophistiquées
permettant de positionner le document, de modifier l'apparence de la page et
ajouter du texte descriptif sont montrées plus
bas sur cette page à l'item
3 - LIENS SPÉCIALISÉS.
2 - IMAGE SERVANT DE LIEN
Javascript
Tout comme un mot, une image (ou une photo) peut aussi être utilisée pour activer
un lien. Sur ce site, une image servant de lien est reconnue par un cadre bleu qui
s'affiche autour de cette image au survol du curseur.
La couleurs du cadre est modifiable. Il s'agit de changer le numéro de la couleur
dans l'instruction
(this,'#0099cc').
L'instruction
(this,'#f2f3f4') est la couleur par défaut de la page et doit être aussi changée
au besoin.
Il faut écrire les deux dernières lignes du code
(class="bordure" onMouseover=... etc.)
sur la même ligne pour que le script fonctionne.
Voici le code à utiliser dans le lien:
<a href="http://www.mef.qc.ca/"
title="Mouvement pour le français" target="newframe">
<IMG src="/images/quebec.gif" title="Québec" width="121" height="29"
border="0" hspace="6" vspace="6" align="left"
class="bordure" onMouseover="borderit(this,'#0099cc')"
onMouseout="borderit(this,'#f2f3f4')"></a>
Voici le code à mettre sur la feuille Javascript externe:
function borderit(which,color){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
which.style.borderColor=color;
}
}
Source du script :
Dynamic Drive.com
3 - LIENS SPÉCIALISÉS
Les liens suivants font appel au
Javascript pour ouvrir des fenêtres dont les
dimensions, les attributs et les contenus sont ajustables
en tout ou en partie.
3.1 - LIEN PRÉ-AJUSTÉ
Javascript
Le Javascript
poppage ouvre une
PAGE
ou une IMAGE
dans une fenêtre dont les attributs ont été pré-ajustée sur la feuille de
Javascript externe: la fenêtre possède seulement la barre de titre, les barres de
défilement et les icônes d'agrandissement. La page peut être interne ou externe
au site et n'écrase pas la page du lien.
Voici le code à utiliser dans le lien pour appeler la fonction:
<img src="/picto/pagesitee.gif" title="Voir le site" height="10"
width="12" hspace="3" border="0">
<a href="/javascript:poppage('http://www.mitan.ca/index.htm');"
title="Page d'accueil de Mitan.ca">Page</a>
Voici le code à mettre sur la feuille Javascript externe:
function poppage(page)
{
var winTxt = "";
winTxt = window.open(page,"poppage","top=5,left=5,
width=500, height=380,status=1,scrollbars=1,resizable=1);
}
NOTE :
Il faut écrire l'instruction
winTxt = window.open... etc. entièrement sur la même ligne
et jusqu'au dernier «;» pour que le script fonctionne.
Pour afficher une image, on remplace
('http://www.mitan.ca/index.htm');"
par
('photos/magasin.jpg');" dans le lien. Dans ce cas-ci, la photo est
réduite par Windows afin de l'adapter à la dimension pré-ajustée de la fenêtre.
MODIFICATIONS :
Les dimensions de la fenêtre
(ici
width=500, height=380) peuvent être modifiées mais seulement sur la
feuille de Javascript externe. Il en est de même pour les autres attributs de la
fenêtre.
On inscrit seulement les attributs que l'on veut activer:
status=1
directories=1
toolbar=1
location=1
menubar=1
scrollbars=1
resizable=1
Source du script :
Multimania Lycos
3.2 - LIEN AJUSTABLE À 100%
Javascript
Ce Javascript utilise la fonction
window.open
sans avoir recours à une feuille Javascript externe. Tous les paramètre sont dans le lien.
Ici, une très grande
photo (1794 px sur 1194 px) s'affiche dans une fenêtre dont quelques attributs
(status="1",
scrollbars="1", resizable="1") ont été paramétrés ("1"=actif
et "0"=inactif) directement
dans le lien tout comme les dimensions désirées pour la fenêtre
(width="600",
height="400").
Les attributs modifiables sont les mêmes qu'en 3.1.
Il faut écrire les deux dernières lignes du code
(class="bordure"
onMouseover=... etc.) sur la même ligne pour que le script fonctionne.
La page n'écrase pas la précédente.
Voici le code à utiliser dans le lien:
<a href="/javascript:void(0)" onClick="MaFenetre = window.open(
'photos/magasin.jpg','Magasin 1946','width="600",height="400",status="1",
scrollbars="1",resizable="1",directories="0",toolbar="0",location="0",
menubar="0",');">
<img src="/photos/amagasin_m.jpg" title="Magasin 1946" width="128"
height="85" border="1" hspace="6" vspace="6" align="left" class="bordure"
onMouseover="borderit(this,'#0099cc')"
onMouseout="borderit(this,'#f2f3f4')"></a>
Source du script :
Multimania Lycos
3.3 - LIEN 100% AUTOMATIQUE
Javascript
Le Javascript popphoto affiche une image dans une fenêtre qui s'ajuste
automatiquement aux dimensions de l'image. Un pré-ajustement
(modifiable) sur la feuille Javascript externe met automatiquement 20 pixels en largeur et 60 en
hauteur pour accommoder un copyright et un bouton de fermeture de fenêtre.
Le titre est configurable et, au lieu de voir apparaître l'adresse du lien dans la barre
du haut de la page, on configure le script pour qu'il affiche un titre qui sera cependant
le même pour toutes les images.
Il faut écrire les deux dernières lignes du code
(class="bordure"
onMouseover=... etc.) sur la même ligne pour que le script fonctionne.
La page n'écrase pas la précédente.
ATTENTION
Si l'image est très grande, la fenêtre le sera aussi,
ce qui peut rendre la consultation difficile sur un petit écran. Il est préférable alors
d'utiliser l'item 3.2 - LIEN AJUSTABLE À 100% afin de limiter la taille de la fenêtre à une
dimension acceptable.
Voici le code à utiliser dans le lien:
<a href="/javascript:popphoto('photos/avion2.jpg')"
title="avion" border="0"> <img src="/photos/avion1.jpg"
title="Avion" width="132" height="99" border="1"
hspace="6" vspace="6" align="left"
class="bordure" onMouseover="borderit(this,'#0099cc')"
onMouseout="borderit(this,'#f2f3f4')"></a>
Voici le code à mettre sur la feuille Javascript externe:
function popphoto(img){
photo1= new Image();
photo1.src=(img);
Controle(img);
}
function Controle(img){
if((photo1.width!=0)&&(photo1.height!=0)){
voirPhoto(img);
}
else{
fonction="Controle('"+img+"')";
intervale=setTimeout(fonction,20);
}
}
function voirPhoto(img){
largeur=photo1.width+20;
hauteur=photo1.height+105;
dimension="width="+largeur+",height="+hauteur;
fenetre=window.open("","",dimension);
texte = "<" + "HTML" + ">";
texte += "<" + "TITLE" + ">" + "Galerie de photos" + "<" + "/TITLE"
+ "><" + "BODY" + ">"; texte += "<" + "CENTER" + "><"
+ "IMG SRC='"+img+"' BORDER=0" + ">";texte += "<" + "FORM"
+ "><" + "INPUT TYPE='BUTTON' VALUE='Fermer la fenêtre'" +
" onClick='self.close()'" + ">"; texte += "<" + "/FORM" + "><"
+ "span STYLE='color:#444444; font-family: arial; font-size:8pt;'"
+ ">" + "© Copyright 2002-2003 " + "<" + "a title='Envoyer un courriel
'href='http://www.mitan.ca/contacts/contacts.htm'" + ">" + "Pascal Bouchard"
+ "<" + "/a" + ">" + " - Tous droits réservés - " + "<"
+ "a title='Mitan.ca' href='http://www.mitan.ca'"
+ ">" + "Mitan.ca" + "<" + "/a" + "><" + "/span" + ">";
texte += "<" + "/CENTER" + "><" + "/body" + "><"
+ "/HTML" + ">";
fenetre.document.write(texte);
fenetre.document.focus();
fenetre.document.close();
}
NOTE : il faut écrire chacune des instructions
texte += sur la même ligne
et cela jusqu'au dernier «;» qui termine l'instruction.
Source du script :
The JavaScript Source
3.4 - LIEN AVEC IMAGES & DESCRIPTION
Javascript
En cliquant sur une image (ou un mot) servant de lien,
le Javascript afficheNote
fait apparaître une fenêtre contenant des photos et du texte descriptif.
 |
|
|
Idéal pour les photos de voyage ou une courte biographie en généalogie.
|
Cette nouvelle page est entièrement générée par la page source, (celle contenant
le lien) et ne fait appel à aucune page HTML extérieure.
L'inclusion ou non de photos, la couleur du fond, le titre dans le cadre, l'entête et le texte,
la couleur et la grosseur des caractères sont tous paramétrables directement
dans le lien qui ouvre la nouvelle fenêtre. Cependant, les dimensions de la
fenêtre sont pré-ajustées sur la feuille du Javascript.
Voici le code à utiliser dans le lien:
<a href= "javascript:void(0)" onclick="return afficheNote(
'Généalogie - Elzéar Bouchard - Biographie',
'photos/famille.jpg',
'images/face_homme.jpg',
'BAIE-SAINT-PAUL',
'Maison familiale',
'Le texte est ici et tout sur la même ligne ',
'#FAF7C0','','#444444','Arial',9)">
<IMG src="/images/face_homme.jpg"
title="Elzéar Bouchard" height="49" width="66"
align="left" border="0" hspace="8" vspace="6"
class="bordure" onMouseover="borderit(this,'#0099cc')"
onMouseout="borderit(this,'#f2f3f4')"></A>
NOTE : les deux dernières lignes doivent être écrites sur la même ligne
pour que le code fonctionne.
Voici le code de la fonction «afficheNote» à mettre sur la feuille
Javascript externe:
var fenetreNote;
function afficheNote(titre, image1, image2, ville, endroit, message,
couleurFond, fond, couleurTexte, typePolice, tailleCaracteres) {
fenetreNote = window.open('','Note','toolbar=no,location=no,directories=no,
status=no, scrollbars=yes,resizable=yes,copyhistory=no,' + 'width=550'
+ ',height=360');
texte = '<' + 'HTML' + '><' + 'HEAD' + '><' + 'TITLE' + '>' + titre
+ '<' + '/TITLE' + '><' + '/HEAD' + '><' + 'BODY BACKGROUND=' +
'"' + fond + '"' + ' BGCOLOR=' + '"' + couleurFond + '">';
texte += '<' + 'CENTER' + '>';
texte += '<' + 'img align="left" border="1" hspace="8" src="' + image1 + '">';
texte += '<' + 'img src="' + image2 + '"' + '><' + 'br' + '><' + 'br' + '>';
texte += '<' + 'b' + '><' + 'span STYLE="color:#9c2203; font-family: arial;
font-size:10pt;"' + '>' + ville + '<' + 'br' + '>';
texte += '' + endroit + '<' + '/span' + '><' + '/b' + '' + '><'
+ '/CENTER' + '>';texte +='<' + 'br' + '><' + 'span STYLE="font-family:'
+ typePolice + ';';texte += ' font-size:' + tailleCaracteres + 'pt;';
texte += ' color:' + couleurTexte +';">';
texte += message + '<' + '/span' + '><' + 'br' + '><' + 'br' + '>';
texte += '<' + 'CENTER' + '><' + 'FORM' + '><'
+ 'INPUT TYPE="BUTTON" VALUE="Fermer la fenêtre"
onClick="self.close()"' + '><' + '/FORM' + '> ';texte += '<'
+ 'span STYLE="color:#444444; font-family: arial; font-size:8pt;"' + '>'
+ '© Copyright 2002-2003 ' + '<' + 'a title="Envoyer un courriel"
href="http://www.mitan.ca/contacts/contacts.htm"' + '>' + 'Pascal Bouchard' + '<'
+ '/a' + '>' + ' - Tous droits réservés - ' + '<' +
'a title="Mitan.ca" href="http://www.mitan.ca"'
+ '>' + 'Mitan.ca' + '<' + '/a' + '><' + '/span' + '>';
texte += '<' + '/CENTER' + '><' + '/BODY' + '><' + '/HTML' + '>';
fenetreNote.document.write(texte);
fenetreNote.focus();
fenetreNote.document.close();
return false;
}
NOTE : il faut écrire chacune des instructions
texte += sur la même ligne
et cela jusqu'au dernier «;» qui termine l'instruction.
Source du script :
Ce script a été réalisé par l'auteur en s'inspirant des scripts
The JavaScript Source.
4 - LIEN DE REDIRECTION
4.1 - REDIRECTION VERS ITEM MÊME PAGE
EXEMPLE:
On veut mettre un lien pour rediriger le lecteur vers le paragraphe
2 - IMAGE SERVANT DE LIEN
au centre de cette page-ci.
Voici le code à utiliser dans le lien:
<a href="#2" title="Image servant de lien">
2 - IMAGE SERVANT DE LIEN</a>
Un ancrage est nécessaire à l'endroit de la page
où le lien redirige. Dans ce cas-ci, c'est le chiffre 2 de l'entête
2 - IMAGE SERVANT DE LIEN qui est ciblé.
Voici l'ancrage à mettre à cet endroit:
<a name="2">2</a> - IMAGE SERVANT DE LIEN
4.2 - REDIRECTION VERS ITEM AUTRE PAGE
EXEMPLE:
On veut mettre un lien pour rediriger le lecteur vers la
Liste des Conventums
sur une autre page du site nommée conventum.htm.
Voici le code à utiliser dans le lien:
<a href="../galeries/conventum.htm#liste"
title="Liste des Conventums" target="newframe">
<img src="/picto/pagesite.gif" title="Ouvrir le site" width="12" height="10"
hspace="3" border="0">Liste des Conventums</a>
Un ancrage est nécessaire sur l'autre page (conventum.htm),
à l'endroit (Liste des Conventums) où le lien redirige. Là, c'est le mot
Liste qui est ciblé.
Voici l'ancrage à mettre sur la page conventum.htm
au paragraphe Liste des Conventums:
<a name="liste">Liste</a> des Conventums
5 - PAGES SUIVANTES
5.1 - PAGE 1 DE 4 - HAUT DE PAGE
À insérer dans le haut de la page après l'entête, l'introduction et la barre de séparation:
|
Page 1 de 4 |
| 1 |
2
| 3
| 4 |
|
Voici le code:
<!--Page suivante - haut de page-->
<table align="center" border="0" cellPadding="0" cellSpacing="0"
width="90%"><tr><td valign="top"class="verspage">
<font color="666666"><b>Page 1 de 4</b></font></td>
<td class="verspage" valign="top" align="right"><b>| 1 |
<A href="/standards_02.htm" title="Page 2 - Les encarts" >2</A>
| <A href="/standards_03.htm" title="Page 3 - Les effets de texte">3</A>
| <A href="/standards_04.htm" title="Page 4 - Les images">4</A> |
<img src="/images/fleches_d.gif" title="flèche droite" width="34" height="11"
border="0"></b>
</td></tr></table><br>
<!-- Fin Page suivante - haut de page-->
5.2 - PAGE 2 DE 4 - HAUT DE PAGE
À insérer dans le haut de la page après l'entête, l'introduction et la barre de séparation:
|
Page 2 de 4 |
| 1 | 2 |
3
| 4 |
|
Voici le code:
<!--Page suivante - haut de page-->
<table align="center" border="0" cellPadding="0" cellSpacing="0"
width="90%"><tr><td valign="top"class="verspage">
<font color="666666"><b>Page 2 de 4</b></font></td>
<td class="verspage" valign="top" align="right">
<img src="/images/fleches_g.gif" title="flèche gauche" width="34" height="11"
border="0"></A><b>
| <A href="/standards_01.htm" title="Page 1 - Les liens">1</A> | 2 |
<A href="/standards_03.htm" title="Page 3 - Les effets de texte">3</A>
| <A href="/standards_04.htm" title="Page 4 - Les images">4</A> |
<img src="/images/fleches_d.gif" title="flèche droite" width="34" height="11"
border="0"></b>
</td></tr></table><br>
<!-- Fin Page suivante - haut de page-->
5.3 - PAGE 3 DE 4 - HAUT DE PAGE
À insérer dans le haut de la page après l'entête, l'introduction et la barre de séparation:
|
Page 3 de 4 |
| 1
| 2 | 3 |
4 |
|
Voici le code:
<!--Page suivante - haut de page-->
<table align="center" border="0" cellPadding="0" cellSpacing="0"
width="90%"><tr><td valign="top"class="verspage">
<font color="666666"><b>Page 3 de 4</b></font></td>
<td class="verspage" valign="top" align="right">
<img src="/images/fleches_g.gif" title="flèche gauche" width="34" height="11"
border="0"><b>
| <A href="/standards_01.htm" title="Page 1 - Les liens">1</A>
| <A href="/standards_02.htm" title="Page 2 - Les encarts">2</A> | 3 |
<A href="/standards_04.htm" title="Page 4 - Les images" >4</A> |
<A href="/standards_04.htm" title="Page 4 - Les images">
<img src="/images/fleches_d.gif" title="flèche droite" width="34" height="11"
border="0"></A></b>
</td></tr></table><br>
<!-- Fin Page suivante - haut de page-->
5.4 - PAGE 4 DE 4 - HAUT DE PAGE
À insérer dans le haut de la page après l'entête, l'introduction et la barre de séparation:
|
Page 4 de 4 |
| 1
| 2
| 3 | 4 |
|
Voici le code:
<!--Page suivante - haut de page-->
<table align="center" border="0" cellPadding="0" cellSpacing="0"
width="90%"><tr><td valign="top"class="verspage">
<font color="666666"><b>Page 4 de 4</b></font></td>
<td class="verspage" valign="top" align="right">
<img src="/images/fleches_g.gif" title="flèche gauche" width="34" height="11"
border="0"><b>
| <A href="/standards_01.htm" title="Page 1 - Les liens">1</A>
| <A href="/standards_02.htm" title="Page 2 - Les encarts">2</A>
| <A href="/standards_03.htm" title="Page 3 - Les effets" >3</A> | 4 |</b>
</td></tr></table><br>
<!-- Fin Page suivante - haut de page-->
5.5 - PAGE SUIVANTE - BAS DE PAGE
À insérer au bas de la page, à la fin du texte et avant la barre de séparation:
Voici le code:
<!--Page suivante - bas de page -->
<p align="right" class="verspage">
<span style="color= #9c2203"><b>Page suivante :& nbsp;& nbsp;</b></span>
<A href="/standards_02.htm" title="Page 2 - Les encarts">Page 2 - Les encarts
<img src="/images/fleches_d.gif" title="Page 2 - Les encarts" width="34"
height="11" border="0"></A>& nbsp;& nbsp;& nbsp;& nbsp;</p><br>
<!-- Fin Page suivante - bas de page-->
Page suivante :
Page 2 - Les encarts
|
Vous êtes ici :
Mitan >
Internet > Les liens
|
Pascal Bouchard - Tous droits réservés - Mitan.ca
Site ouvert depuis le 24 juin 2002 -
|
