Images, images avec zones réactivesUn article de Eric Bruyndonckx.
[modifier] Les formats d'image[modifier] GIF87a (Graphic Interchange Format)
[modifier] GIF89a (Graphic Interchange Format)
[modifier] JPEG (Joint Photographic Experts Group)
[modifier] PNG (Portable Network Format)
[modifier] Les Images[modifier] Insérer des images<img src="URL" alt="texteAlternatif" />
Pour URL mentionnez une adresse Web ou la cible avec ou sans chemin du fichier image désiré. Pour texteAlternatif mentionnez un texte alternatif qui s'affichera en lieu et place de l'image dans le cas où :
[modifier] Description d'une image[modifier] Courte<img src="URL" alt="texteAlternatif" title="descriptionComplementaire" />
Pour descriptionComplementaire l'attribut title permet (à partir de Mozilla 1, Netscape 6, IE 5) d'associer à l'image une description complémentaire qui apparaît sous la forme d'une info-bulle jaune lorsque le curseur survole l'image. [modifier] Longue<img src="URL" alt="texteAlternatif" longdesc="URL" />
Pour URL l'attribut longdesc permet de définir un lien vers une ressource fournissant une description plus détaillée de l'image.
[modifier] Largeur et hauteur d'une image<img src="URL" alt="texteAlternatif" width="pixels" height="pixels" />
Pour pixels les attributs height et width permettent de redimensionner une image (compression) afin de bénéficier d'une meilleure qualité de la page à l'impression. Exemple : afficher une image de 800x600 pixels dans une page Web aux dimensions 200x150 pixels, 2 possibilités se présentent :
[modifier] Bordure d'une image<img src="URL" alt="texteAlternatif" border="epaisseur" />
Pour border mentionnez un nombre pour définir l'épaisseur de la bordure en pixels. [modifier] Alignement des images dans le texte<img src="URL" alt="texteAlternatif" align="alignement" />
Pour alignement notez une des valeurs suivantes :
[modifier] Espacement entre l'image et le texte<img src="URL" alt="texteAlternatif" align="alignement" hspace="espacementHorizontal" vspace="espacementVertical" />
Pour espacementHorizontal notez un nombre pour déterminer l'espace en pixels avec le texte à gauche et à droite de l'image. Pour espacementVertical notez un nombre pour déterminer l'espace en pixels avec le texte au dessus et en dessous de l'image. [modifier] Les images avec des zones réactives[modifier] Définition des zones réactives<img src="URL" alt="texteAlternatif" usemap="#nomCarte" />
<map name="nomCarte">
<area shape="type" coords="coordonnees" href="URL">
</map>
Pour nomCarte de l'attribut usemap et name, le nom doit être identique. Pour type mentionnez une des valeurs suivantes :
[modifier] zone réactive rectangulairePour coordonnees mentionnez 4 valeurs, séparées par une vigule : Exemple : 10,20,90,100
[modifier] zone réactive circulairePour coordonnees mentionnez 3 valeurs, séparées par une vigule : Exemple : 100,20,90
[modifier] zone réactive polygonalePour coordonnees mentionnez de 6 à n valeurs pairs, séparées par une vigule : Exemple : 10,20,40,30,300,200
[modifier] Images aléatoiresAfin de donner un aspect toujours neuf à son site, il peut être intéressant de faire changer automatiquement les images d'une page à chaque rafraîchissement de cette page. Pour ce faire, rien de plus simple qu'un petit script PHP: Exemple: www.agencemag.ch <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Images Aléatoires</title>
<?php
//Définir le nombre d'images qui vont changer
$nbimages=4;
//Définir l'emplacement des images à afficher
$nomimages[1]="mon_image1.jpg";
$nomimages[2]="mon_image2.jpg";
$nomimages[3]="mon_image3.jpg";
$nomimages[4]="mon_image4.jpg";
//Initialiser la fonction random
srand((double)microtime()*1000000);
//La fonction rand() va générer un nombre aléatoire entre 1 et le nombre d'images défini dans la variable $nbimages
$affimage=rand(1,$nbimages);
?>
</head>
<body>
<!-- Inclure cette ligne de code à l'endroit où on veut faire apparaître l'image-->
<img src="<?echo $nomimages[$affimage];?>" border=0 width=460 height=420 alt="Mon image">
</body>
</html>
[modifier] Exercice
Difficile sans éditeur HTML WYSIWYG (What You See Is What You Get) [modifier] Corrigé<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mise en forme du texte, caractères spéciaux et tailles de caractères</title>
</head>
<body>
<h1>Mes images</h1>
<img src="images/suisse.gif" width="374" height="265" border="0">
<hr width="100%">
<a href="images/suisse.gif">
<img src="images/suisse.gif" width="187" height="132" border="0" /><br />
<font size="-2">Cliquez ici pour agrandir</font>
</a>
</body>
</html>
[modifier] Voir aussi
|