lundi 9 mars 2009 aujourd'hui, la manipulation des images

Download Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

Post on 03-Apr-2015

108 views

Category:

Documents

2 download

Embed Size (px)

TRANSCRIPT

  • Page 1
  • Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images
  • Page 2
  • Introduction La manipulation d'images en CSS est un sujet trs vaste mais aussi trs intressant. Dans un premier temps, nous nous limiterons quelques exemples extrmement simples : Insertion d'une image dans une page Redimensionnement d'une image Utilisation d'une image comme lien hypermdia Suppression de la bordure d'une image
  • Page 3
  • Insrer une image dans une page Pour insrer une image dans une page Web, nous utiliserons la balise XHTML. Commencez par reprer une image de taille raisonnable sur le disque dur de votre ordinateur et copiez-la dans le dossier "poub" ou "poubelle". Utilisez ensuite la balise comme suit : Attention la casse des caractres dans le nom de l'image.
  • Page 4
  • Solution
  • Page 5
  • Modifier les dimensions d'une image Pour modifier la taille d'une image, vous pouvez utiliser les attributs width (largeur) et height (hauteur) dans la balise. Par exemple :
  • Page 6
  • Exercice Entrainez-vous modifier les dimensions de l'image utilise dans l'exercice prcdent. Info : Plutt que de rduire l'image en utilisant des attributs XHTML, vous pouvez aussi rduire directement l'image en utilisant un logiciel graphique quelconque. PhotoFiltre par exemple. L'image sera alors plus "lgre", la page se chargera plus vite et vous n'aurez pas utiliser les attributs width et height.
  • Page 7
  • Utiliser une image comme lien hypermdia Pour qu'une image devienne cliquable et oriente l'internaute vers une page de votre choix, il suffit d'entourer la balise d'une balise :
  • Page 8
  • Exercice Dfinissez une image cliquable qui pointe vers le site Google.fr
  • Page 9
  • Solution
  • Page 10
  • Suppression de la bordure autour d'une image Lorsque vous dfinissez un lien hypermdia sur une image, une bordure d'aspect plutt dsagrable entoure l'image. Pour la faire disparatre, vous initialiserez l'attribut border de la balise 0 :
  • Page 11
  • Exercice Supprimez la bordure qui apparat autour de l'image de l'exercice prcdent.
  • Page 12
  • Solution