LES STANDARDS

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 4 de 4

| 1 | 2 | 3 | 4 |

LES IMAGES

NOTE 1:
Sauf indication contraire, tous les codes qui suivent ont été testés et sont entièrement compatibles avec Netscape et Internet Explorer.

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 dans FrontPage:

Feuille de styles de Mitan (CSS)
Feuille des Javascripts de Mitan

1 - IMAGES INTÉGRÉES AU TEXTE

Une image, quelle soit un gif ou une photo JPEG, doit être considérée exactement comme un caractère de texte! Dans cette phrase, nous utilisons un petit pictogramme sous format gif de 13 px en hauteur sur 15 px en largeur avec une marge horizontale de 5 pixels. Il s'intègre parfaitement à la phrase sans déformer son espacement car la hauteur du pictogramme, 13 pixels, n'excède pas la hauteur de ligne, 18 pixels, du paragraphe. Voici le code:

<IMG height=13 width=15 hspace=5 vspace=0 border=0 
title="Lire le texte" src="/picto/pagetexte.gif" >

Si, par contre, on utilise une image de 73 pixels de hauteur sur 63 de largeur excédant la hauteur de ligne comme ici, nous aurions un haussement de la ligne pour compenser la hauteur excessive du «caractère» spécial que représente cette image.

Pour compenser cet effet peu esthétique, on place la photo ou l'image à la gauche ou à la droite du texte de façon à ce que le texte l'entoure parfaitement. Il suffit alors d'ajouter la commande <align="left" ou "right> pour que l'image ou la photo se positionne correctement dans la marge gauche ou droite.
Il est de bon ton d'alterner le positionnement pour permettre aux yeux de bouger de gauche à droite et conserver l'intérêt du lecteur. Remarquer aussi l'ajout de «hspace et vspace» qui permettent de mettre une marge entre l'image et le texte. Si désiré, la propriété «border» peut être activée (remplacer le 0 par 1) pour mettre une bordure autour de l'image. Voici le code utilisé ici:

<IMG width="121" height="29" border="0" align="right" 
hspace="6" vspace="6" title="Québec" src="/images/quebec.gif">

2 - IMAGES FLIP-FLOP (Permutation d'images)

En passant le curseur sur l'image, vous en verrez une autre apparaître. La permutation des images est obtenu par un javascript disponible chez chrispoole.com.

Pour que la permutation fonctionne bien, on a besoin de 3 éléments:
- Une instruction pour permuter les 2 images.
- Un script pour appeler le Javascript externe.
- Un Javascript externe appelé par chaque page.

Voici l'instruction à mettre sur la page pour 
permuter 2 images comme ci-haut:

<IMG src="/photos/pascal4.jpg" 
class="domroll photos/pascal3.jpg" 
 title="Pascal" width="63" height="73" border="0" 
 hspace="8" vspace="6" align="left">

Voici le script appelant le Javascript externe. 
Elle doit apparaître sur chaque page contenant des permutations
d'images. On l'insère à la fin de chaque page (pas au début)
juste avant la balise </body>: 

<script language="javascript" src="/domroll.js"></script>

Voici le Javacript externe domroll.js, version 3, à mettre 
dans le répertoire des javascript du site:

//============================
// DOM Image Rollover v3
//============================
// copyright Chris Poole
// http://chrispoole.com
// domroll@chrispoole.com
// demo: http://chrispoole.com/scripts/dom_image_rollover/
//============================

function domRollover() {
	if (navigator.userAgent.match(/Opera (\S+)/)) {
		var operaVersion = parseInt(navigator.user
		Agent.match(/Opera (\S+)/)[1]);
	}
	if (!document.getElementById||operaVersion< 7) return;
	var imgarr=document.getElementsByTagName('img');
	var imgPreload=new Array();
	var imgSrc=new Array();
	var imgClass=new Array();
	for (i=0;i< imgarr.length;i++){
		if (imgarr[i].className.indexOf('domroll')!=-1){
			imgSrc[i]=imgarr[i].getAttribute('src');
			imgClass[i]=imgarr[i].className;
			imgPreload[i]=new Image();
			if (imgClass[i].match(/domroll (\S+)/)) {
				imgPreload[i].src = imgClass[i].
				match(/domroll (\S+)/)[1]
			}
			imgarr[i].setAttribute('xsrc', imgSrc[i]);
			imgarr[i].onmouseover=function(){
				this.setAttribute('src',this.
				className.match
				(/domroll (\S+)/)[1])
			}
			imgarr[i].onmouseout=function(){
				this.setAttribute('src',this.
				getAttribute('xsrc'))
			}
		}
	}
}
domRollover();

Sur le site de Dynamic Drive.com, vous trouverez une version antérieure du DOM Image rollover. L'inconvénient est que tout le Javascript est sur chaque page ce qui augmente son poids.

Il existe une variante du flip-flop d'image qui a tout le javascript directement sur la page. J'ai fais le calcul du poids du code nécessaire et je crois que la méthode que je propose est la plus avantageuse à cause de la simplicité et, surtout, si on utilise la fonction plusieurs fois sur la page.

3 - IMAGES SÉPARÉES DU TEXTE

Tableaux

Dans certaines circonstances, il peut arriver que l'on veuille séparer la photo ou l'image du texte, chacun dans sa colonne. Dans ce cas, il faut placer l'image et le texte dans un tableau où chacun occupera sa propre cellule individuelle.

Image vs texte

La couleur de fond du tableau est donnée par la propriété «bgcolor="#EEECD2"» et la largeur par «width="250"». Pour que l'image s'affiche en haut et non pas au centre de la colonne, il faut le spécifier avec la propriété <td valign="top">. Si on veut placer l'image à la droite, il faut alors inverser et mettre la «cellule» du texte avant celle de l'image.

Voici le code utilisé pour ce tableau:

<table cellpadding="2" cellspacing="2" border="0" width="250" 
align="center" bgcolor="#EEECD2">
<tr>
<td valign="top">
<font color="#29525A">
<img width="66" height="48" border=1 vspace="5" 
title="Tom Hanks" src="/photos/tom_hanks.jpg">
</font></td>
<td valign="top"><b>
<font size="1" face="Verdana, Geneva, Arial, Helvetica" color="#850D07">
tom Hanks vs Al Capone</font></b><br>
<font face="Verdana, Geneva, Arial, Helvetica" size="1">
******texte*******
<br></font>
</td>
</tr>
</table>

4 - IMAGES AVEC LÉGENDE - TABLEAU

Tableaux

Légende faite avec <div>

En HTML, pour insérer une image avec une légende, il faut utiliser la fonction <table> pour positionner l'image et <div> pour la légende. La propriété «width» est très importante car elle permet de limiter la légende à la largeur spécifiée. Voici le code utilisé:

<p><table border="0" cellpadding="5" cellspacing="0" 
width=66 align="left" valign="top">
<tr><td>
<div>
<IMG width="66" height="49" align="left" border="1" 
hspace="6" vspace="6" title="Hublots" src="/photos/hublots1.jpg" >
<div align="center" class="gen3">Légende ici</div>
</div>
</td></tr>
</table></p>

5 - IMAGES AVEC LÉGENDE - CSS

Feuille de style

EXEMPLE # 1
Le logo du Québec avec une bordure tout autour

Il est possible aussi d'utiliser les feuilles de style et la fonction <div> pour faire la même chose... et encore plus! Le premier avantage vient du fait qu'avec les instructions de formatage insérées dans la feuille de style, il est possible de changer l'apparence de toutes les images du site à partir de cette feuille seulement. Voici le code pour afficher cette image:

EXEMPLE # 1
<div class="figure2d">
<p><img width="121" height="29" border="0" title="Logo Québec" 
src="/images/quebec.gif"> <p class="caption">Légende ici</div>

Voici les instructions à mettre dans la feuille de style pour toutes les images qui partageront ce code:
- La propriété «float» positionne l'image à gauche ou à droite;
- La propriété «width» attribue 25% de l'espace disponible à l'image;
- La propriété «border» met une bordure autour de l'image;
- La propriété «margin» éloigne la bordure de la marge la plus proche;
- La propriété «padding» met une marge à l'intérieur des bordures;
- La propriété «text-align» aligne le texte.

DIV.figure1 {
float: right;
width: 25%;
border: thin silver solid;
margin: 3px;
padding: 0 px;
text-align: center;
}
P.caption {
font-style: normal;
font-size: 12px;
line-height:12px;
font-family:arial narrow;
text-indent: 0;
}

Donc, avec l'EXEMPLE # 1, on se rend compte que pour avoir une variété de positionnement, il faut créer plusieurs instructions dans la feuille de style: par exemple, il en faut une pour placer l'image à gauche, une autre pour la mettre à droite, une autre pour mettre une bordure, une autre pour inclure une couleur de fond, etc.

EXEMPLE # 2 - IMAGE SANS BORDURE

EXEMPLE # 2
Image sans bordure, largeur 25%, couleur de fond et alignée à gauche.

EXEMPLE # 2
Div.figure2 {
float: left;
width: 25%;
margin: 3px;
padding: 0px;
background: #CCCCFF;
text-align: center}

Ainsi, pour positionner l'image à gauche, une nouvelle instruction nommée «figure2» a été construite avec les modifications suivantes:

- Modification de l'instruction «float» pour que l'image soit à gauche;
- Ajout de la couleur de fond avec la ligne «background: #CCCCFF;;
- Retrait de la ligne «border: thin silver solid;» pour enlever la bordure;
- Retrait de «margin» et de «padding».

NOTE:
Ici, nous utilisons un cadre de couleur pour montrer les limites autour de l'image avec les différentes propriétés utilisées. En pratique, ça fonctionne bien avec Internet Explorer mais moins bien avec NETSCAPE: en effet, dans ce cas, le contour coloré n'enveloppe ni le haut ni le bas de l'image et il faut ajouter alors un <br> au début et à fin de l'instruction pour que ça fonctionne ce qui augmente la hauteur dans Internet Explorer. Donc: éviter les fonds de couleur!

EXEMPLE # 3 - LÉGENDE À DROITE DE L'IMAGE

EXEMPLE # 3
Avec <align=left» dans «Img», la légende entoure l'image à sa droite et en dessous.

En conservant les mêmes instructions que précédemment, nous ajoutons cependant la propriété <align="left"> dans le code de l'image <IMG align=left...etc.>. La légende se comporte alors exactement comme un texte qui entoure l'image et apparaît à la droite de l'image et non en dessous. La valeur de «width» est encore à 25% mais accommode le mot le plus long et ajuste le cadre en conséquence. Ici, j'ai fait l'utilisation de «& nbsp;» pour allonger les mots.

EXEMPLE # 4 - MARGES ET PADDING = négatif

EXEMPLE # 4
Image à 18%, avec margin à
-4 px et padding à
-4 px.

Si toutes les images d'une pages sont de la même taille, 66 pixels de largeur comme ici, on peut alors diminuer la largeur de 25% à 18% et jouer sur «margin» et «padding» pour diminuer l'encombrement de l'image. Dans cet exemple, nous utilisons des valeurs négatives. Lorsqu'on réduit la fenêtre, plus dans Netscape que dans Internet Explorer, le texte connexe empiète sur la bordure de l'image. Cependant, dans un cas comme l'autre, c'est le mot le plus long de la légende qui établi la largeur finale du cadre.

EXEMPLE # 5 - WIDTH, MARGES ET PADDING = zéro

EXEMPLE # 5
Image à 18% avec margin et padding à 0.

Si on met «width=0», dans Internet Explorer, c'est le mot le plus long de la légende (ici, la dernière ligne) qui va déterminer la largeur finale du cadre de l'image. Par contre, dans Netscape, c'est le bordel! Plus rien n'empêche le texte connexe d'empiéter complètement sur l'image. Il faut donc mettre un minimum en pourcentage.

Pour ce qui est de «margin=0» et de «padding=0», ça devrait être la norme surtout si aucun cadre coloré n'est utilisé.

EXEMPLE # 6 - CONFIGURATION OPTIMALE

EXEMPLE # 6
«width= 18 %» Pas de «margin» ni de «padding».

Voici la configuration optimale pour que l'image s'affiche correctement aussi bien dans Internet Explorer que Netscape:

- «width» est à 18%. Cependant, doit être ajusté avec la grosseur de l'image;
- Aucun «padding» ni «margin»;
- Le mot le plus long de la légende établi la largeur du cadre;
- Ne pas utiliser de cadre coloré, de préférence.

Voici le code à utiliser pour l'affichage d'une image à gauche et sans bordure:

EXEMPLE # 7
«width= 18 %» Image avec bordure.

<div class="figure1g">
<p><IMG src="/photos/hublots1.jpg" title="Hublots"
width="66" height="49" border="1"></p>
<p class="caption">Le mot le plus long ici<br>
La légende ici.</p>
</div>

L'exemple 7 montre le résultat avec une bordure. Une «margin=3» est nécessaire pour détacher la bordure du bord de la page.

VOICI LES CODES DANS LA FEUILLE DE MITAN:

Sans bordure:
Image à gauche: <div class="figure1g">
Image à droite: <div class="figure1d">

Avec bordure:
Image à gauche: <div class="figure2g">
Image à droite: <div class="figure2d">

6 - IMAGES RE-DIMENSIONNÉES - CSS

Feuille de style

NOTE:
Ce qui suit est à titre informatif seulement car je n'y vois pas beaucoup d'utilité présentement. Pour plus de détails et d'autres exemples, consulter le site officiel qui établi les standards des feuilles de style CSS, l' agence W3C.

Une évolution des fonctions que nous venons de voir permettent aussi le re-dimensionnement de grandes images pour les afficher en plus petit sur la page. Par exemple, l'image de la tour Eiffel mesure en réalité 136 pixels sur 200 pixels et celle de St-Tropez, 300 sur 205. Il est possible, (mais pas tellement pratique selon moi à cause du poids des images) de rapetisser ces images sur la page. Voici comment c'est fait.

Voici une façon de simuler cet élément avec les feuilles de style. Dans ce cas-ci, il n'y a pas de redimensionnement et la photo se présente sous ses dimensions originales de 136 px sur 200 px. La légende se positionne très mal. Pourquoi, je ne le sais pas! Dans le deuxième exemple, elle se positionne comme demandé.

Modèle réduit de la tour Eiffel au Parc Mini-France


<div class="figure11">
<p><img src="/photos/eiffel.jpg" 
width="136" height="200" 
tilte="Eiffel tower">
<p class="caption">
Modèle réduit de la tour
Eiffel au Parc Mini-France
</div>

Dans la feuille de style, on utilise les classes «figure» et «caption» pour positionner l'image dans un espace équivalent à 25% de la largeur du paragraphe connexe. Voici les règles qui sont appliquées:

DIV.figure11 {
float: right;
width: 25%;
border: thin silver solid;
margin: 0.1em;
padding: 0.1em;
text-align: center;
}
P.caption {
font-style: normal;
font-size: 12px;
line-height:12px;
font-family:arial narrow;
text-indent: 0;
}

En fait, seules les deux premières déclarations «float» et «width» sont indispensables, le reste étant de la décoration.

RE-DIMENSIONNEMENT DE L'IMAGE

Dans l'exemple précédent, on voit qu'il y a un problème car, avec un écran réduit, l'image est toujours d'une largeur de 136 px et l'élément <div>, 25% du texte connexe. Ainsi, si on rapetisse la fenêtre à 640 x 480, l'image empiète sur l'élément <div>.

Si les largeurs de toutes les images du document sont connues, on pourrait ajouter une largeur minimale à l'élément <div>, comme suit:

DIV.figure {
min-width: 150px;
}

Saint-Tropez et sa forteresse dans le soleil couchant

Mais, il y a une autre façon de re-dimensionner l'image comme montré dans l'exemple suivant où l'image est plus grande (vraie grandeur plus bas) que la précédente. On sait que les grandes images JPEG ne se dimensionnent pas très bien. Par contre, un diagramme ou un graphique en format SVG se re-dimensionne parfaitement. Voici le code utilisé ici:

<div class="figure11"> 
<p><img class="scaled" title="Saint-Tropez">
src="/photos/st-tropez.jpg" <p class="caption">
Saint-Tropez et sa forteresse dans le soleil couchant</div>

Voici la feuille de style utilisée:

div.figure11 {
float: right;
width: 25%;
margin: 0.1em;
padding: 0.1em;
text-align: center
}
p.caption {
font-style: normal;
font-size: 12px;
line-height:12px;
font-family:arial narrow;
text-indent: 0;
}
img.scaled {
width: 100%;
}

Il y a seulement un ajout à la règle précédente soit «class="scaled"»dans «img» qui met l'image aussi large que le permet l'intérieur de l'élément <div> (la surface à l'intérieur des bordures et du padding).

DIMENSIONNEMENT AUTOMATIQUE

Noter que l'image originale est de 300 px sur 205 px et prend toute la place disponible.

Saint-Tropez et sa forteresse dans le soleil couchant

CSS1 ET CSS2 ne donnent pas d'algorithme pour la grandeur des images flottantes quand la propriété «width» est «auto» (contrairement aux cellules des tableaux). C'est pour éviter que les navigateurs n'aient à faire autant de travail pour une image flottante que pour un tableau. Cependant, avec CSS3, cela devrait changer et les navigateurs devront faire un peu plus de travail pour trouver une largeur "raisonnable".

Assumons que ces changements sont adoptés et créons une image flottante qui est aussi large que possible pour son contenu (l'image et la légende), simplement en omettant «width» ou, explicitement, le mettant à «auto».:

DIV.figure11 {
float: right;
width: auto; /* peut être omis */
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
text-align: center;
}
P.caption {
font-style: italic;
font-size: smaller;
text-indent: 0;
}

Pages précédentes : | 1 | 2 | 3 | 4 |

Vous êtes ici : Mitan > Internet > Les images