<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Images et Zones actives</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="GENERATOR" content="amaya 8.2+, see http://www.w3.org/Amaya/" />
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body xml:lang="fr" lang="fr">

<table border="0" summary="toc">
  <tbody>
    <tr>
      <td><p><img alt="W3C" src="../images/w3c_home" /> <img alt="Amaya"
        src="../images/amaya.gif" /></p>
      </td>
      <td><p><a href="Tables.html.fr" accesskey="p"><img
        alt="previous" src="../images/left.gif" /></a> <a
        href="Manual.html.fr" accesskey="t"><img alt="top"
        src="../images/up.gif" /></a> <a href="Math.html.fr"
        accesskey="n"><img alt="next" src="../images/right.gif" /></a></p>
      </td>
    </tr>
  </tbody>
</table>

<div id="Client-sid">
<h2><a name="L1013">Images et Zones actives</a></h2>

<h3><a name="Adding">Ajouter une image</a></h3>

<p>Pour insérer une image, choisissez l'entrée <strong>Image</strong> depuis
le menu <strong>XHTML</strong> ou cliquez sur le bouton <img alt="Image "
src="../images/Image.gif" longdesc="longdesc.htm" /> (ou encore utilisez le
raccourci clavier control-t, control-i pour Unix). Ceci fait apparaître une
boîte de dialogue qui vous permet de rentrer le nom du fichier et le <a
href="#Alternative">texte de remplacement</a> ('ALT' texte) de l'image
désirée. Si vous souhaitez fournir une longue description (par exemple si
votre image présente une information complexe) vous devriez la faire dans un
document séparé et la relier en donnant l'URI comme un descripteur long
(<strong>longdesc</strong>), également disponible dans le menu
<strong>Attributs</strong>.</p>

<p> Pour faciliter la recherche d'un fichier image vous pouvez entrer une
valeur de <strong>filtre</strong>, et utiliser le bouton
<strong>filtre</strong>. Ainsi le dialogue listera seulement les fichiers qui
correspondent à votre critère.</p>

<h3>Remplacer une image</h3>

<p>Pour remplacer une image sélectionnez cette image en draguant sur l'image
avec la souris. Procédez alors comme pour l'ajout d'une image (voir
ci-dessus). Lorsqu'une image (et seulement une image) est entièrement
sélectionnée, la boîte de dialogue des images effectue le remplacement de
l'image sélectionnée au lieu d'insérer une nouvelle image.</p>

<h3><a name="Alternative">Texte de remplacement et descriptions
longues</a></h3>

<p>Pour les éléments comme les images (et autres objets multimédia) vous
devez fournir un texte de remplacement. Celui ci sera présenté, comme à
l'habitude, à la place de l'image par un navigateur avec un système de sortie
vocale, ou une visualisation en Braille (utilisé par de nombreux aveugles).
Il est également courant que les utilisateurs ayant des connections de
mauvaise qualité demandent la vue alternée, où le texte est transmis beaucoup
plus vite que les images.</p>

<p>Le texte de remplacement devrait remplacer l'image en fonction. Par
exemple, si l'image est utilisée pour fournir une icône de lien (c'est le cas
de l'icône du W3C en haut de cette page) ainsi le titre de la page référencée
serait un bon texte de remplacement.</p>

<p>Il existe des cas où une image n'est utilisée pour un effet visuel, et
n'apporte aucune information supplémentaire à la page. Dans ce cas, il est
approprié d'utiliser un blanc de remplacement car il faut toujours un texte
de substitution - entrez deux guillemets comme alternative (eg. alt="").</p>

<p>Dans les cas où l'image transporte une information importante qui n'est
pas disponible depuis le texte du document, vous devez fournir une
description de l'information. L'option <strong>longdesc</strong> du menu
<strong>Attributs</strong> vous permet de relier une description (qui est un
URI - un document séparé, ou une partie nommée du document courant) à une
image.</p>

<p>Afin de donner une idée de comment une page sans les images doit être
présentée, Amaya fournit une option <strong>Montrer la vue alternée</strong>
dans le menu <strong>Vues</strong>. Dans le cas d'un navigateur oral, la <a
href="Views.html.fr#Alternate">vue alternée</a> pourrait être simplement lue
à voix haute. Sans des textes de remplacement pour les images, de nombreuses
pages deviendraient difficiles voire impossibles à naviguer, et les
utilisateurs seraient condamnés à trouver "leur chemin dans le noir".</p>

<h3><a name="Using">Utiliser des zones actives</a></h3>

<p><strong>Amaya</strong> vous donne la possibilité d'utiliser des zones
actives :</p>
<ul>
  <li>Pour activer une zone dans un plan, double-cliquez sur la zone avec le
    bouton gauche de la souris. L'URI attaché à cette zone est alors
  importé.</li>
  <li>Pour visualiser les zones existantes, choisissez <strong>Montrer les
    zones actives</strong> du menu <strong>Vues</strong>.</li>
</ul>

<h3><a name="Creating">Créer des zones actives</a></h3>

<p>Pour créer une nouvelle zone active, insérez une image à l'intérieur du
document, et définissez les zones comme des liens.</p>

<p>Pour créer une zone dans une image, sélectionnez l'image ou une zone
existante de cette image. Ensuite, choisissez une des options
<strong>Rectangle</strong>, <strong>Cercle</strong>,
<strong>Polygone</strong> depuis le sous-menu <strong>Zone active</strong> du
menu <strong>XHTML</strong>, suivant la forme de la nouvelle zone que vous
souhaitez créer. L'option <strong>Montrer les zones actives</strong> du menu
<strong>Vues</strong> tracera le contour de chaque zone active existante sur
une image.</p>
<ul>
  <li>Pour créer une zone rectangulaire ou circulaire, vous devez tout
    d'abord sélectionner la position du coin en cliquant avec le bouton
    gauche de la souris. Laissez le bouton appuyé et déplacez la souris
    jusqu'à la position du coin opposé, puis lâchez le bouton. La zone est
    maintenant définie.</li>
  <li>Pour un polygone, entrez chaque point en cliquant la position
    correspondante avec le bouton gauche de la souris. Pour indiquer le
    dernier point, cliquez avec le bouton du milieu.</li>
</ul>

<p>Quand la zone a été définie, vous devez fournir <a href="#Alternative">le
texte de remplacement</a> dans la boîte de dialogue qui apparaît et entrer la
cible du lien associée à cette zone. Sélectionnez uniquement la cible (ou
entrer son URI si elle n'est pas visualisée), de la même manière que pour <a
href="Links.html.fr#L245">créer des liens</a>.</p>

<h3>Déplacer des zones actives<strong></strong></h3>

<p>Quand une zone a été définie, vous pouvez la déplacer :</p>
<ul>
  <li><p>Par manipulation directe - en combinant la <strong>touche
    Control</strong> et le <strong>bouton gauche</strong> de la souris dans
    la zone active, vous pourrez déplacer cette zone.</p>
  </li>
  <li><p>En éditant l'attribut <strong>coords</strong> de la zone dans la vue
    structure.</p>
  </li>
</ul>

<h3><a name="L1171">Redimensionner des zones actives</a></h3>
<ul>
  <li>Par manipulation directe - en combinant la <strong>touche
    Control</strong> et le <strong>bouton du milieu</strong> ou le
    <strong>bouton droit</strong> de la souris à l'intérieur de la zone
    active, vous pourrez redimensionner cette zone.</li>
  <li>En éditant l'attribut <strong>coords</strong> de la zone dans la vue.
    <p></p>
  </li>
</ul>
</div>

<p><a href="Tables.html.fr#Editing"><img alt="previous"
src="../images/left.gif" /></a> <a href="Manual.html.fr"><img alt="top"
src="../images/up.gif" /></a> <a href="Math.html.fr#Math"><img alt="next"
src="../images/right.gif" /></a></p>
<hr />
</body>
</html>
