Insérer des images

• L'image ne doit pas être trop grande sinon on ne la verra pas en entier dans le navigateur.
• L'image ne doit pas être trop "lourde". Evitez si possible des images de plus de 70 ko. Plus vous avez d'images dans votre page et plus elle sera longue à s'afficher.

Vous pouvez utiliser The Gimp pour retoucher vos images. Ce logiciel permet aussi de faire des captures d'écran. C'est ce qui me permet de vous mettre des copies d'écran de Nvu/Mozilla dans ces pages.

Quelques commentaires sur cette image :

Vous disposez de 4 onglets : image, dimensions, apparence et lien.

Image :c'est ici que vous choisissez votre image. Sélectionnez en une dans le dossier qui contient votre site web.

La rubrique "Infobulle" (ou "vignette") vous permet de mettre un texte qui apparaitra au-dessus de l'image au passage de la souris.

"Texte de remplacement" permet de spécifier un texte si l'image n'apparait pas (par exemple si l'internaute à désactivé l'affichage des images dans son navigateur). Complétez impérativement cette case pour que vos pages soient compatibles XHTML.

A noter aussi que dans Internet Explorer, le texte de remplacement est aussi affiché en infobulle si cette dernière n'est pas spécifiée. Ceci est une mauvaise chose car de nombreux webmasters ne remplissent que le "texte de remplacement" pensant qu'il s'affichera aussi en infobulle. Or les autres navigateurs n'afficheront pas cette infobulle, ce qui est le comportement normal d'après les standards HTML. Conclusion : même si vous mettez le même texte en infobulle et en texte de remplacement, il faut l'écrire dans les deux cases.

Dimensions : vous pouvez modifier les dimensions de l'image ici, mais attention, c'est déconseillé. En effet vous ne modifiez que l'affichage de l'image, et pas sa taille réelle. Donc le poids de l'image ne sera pas modifié. Il vaut mieux modifier l'image avec un logiciel de retouche photo.

Apparence : vous permet de spécifier la position de l'image par rapport au texte.

Lien : vous permet de mettre un lien sur l'image, comme nous l'avons fait avec le texte dans un cours précédent.

• vous avez oublié de transférer les images ! Erreur classique. Le texte de la page et les images sont des fichiers différents. Il faut penser à tout transférer sur le serveur. La page htm et les images.
• vous avez mis les adresses des images avec des noms absolus. Si vous faites référence à l'image dans votre page avec une adresse du genre c:\mon_site\image.jpg le lien ne fonctionnera pas car les images sur le serveur ne sont pas sur un disque c:.

Pire, vous risquez même de ne pas détecter le problème. En effet dans le cas de l'erreur avec une adresse absolue, comme les images sont sur votre ordinateur, vous les verrez. Mais ces images ne seront pas sur les ordinateurs de vos visiteurs, donc ils ne les verront pas.

Prenons le cas de l'image ci-dessous. Normalement, elle ne s'affiche pas chez vous (il y a un texte de remplacement), mais elle s'affiche chez moi. En effet son adresse est c:/images/cdprof.gif. Sur mon ordinateur elle est bien à cet endroit, mais pas sur le votre. Pour vérifier les adresses cliquez avec le bouton droit sur l'image puis sur "propriétés". Faites de même avec l'image plus haut dans la page et regardez la différence.

Reprenez le tableau de l'exercice précédent et ajoutez une image dans la cellule du milieu de la troisième ligne. Ecrivez un texte dans chaque cellule de part et d'autre de l'image.

Ajoutez un lien hypertexte sur l'image vers le site http://www.cdprof.com. Ajoutez aussi l'infobulle suivante "Découvrez cdprof.com".

Cours suivant : utilisation des calques