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

of 12 /12
Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

Upload: luc-sellier

Post on 03-Apr-2015

108 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

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

Page 2: Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

Introduction La manipulation d'images en CSS est un sujet

très vaste mais aussi très intéressant.

Dans un premier temps, nous nous limiterons à quelques exemples extrêmement simples :

Insertion d'une image dans une pageRedimensionnement d'une imageUtilisation d'une image comme lien hypermédiaSuppression de la bordure d'une image

Page 3: Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

Insérer une image dans une page Pour insérer une image dans une page Web,

nous utiliserons la balise XHTML <img>.

Commencez par repérer 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 <img> comme suit :<img src="Nom_Image.jpg">

Attention à la casse des caractères dans le nom de l'image.

Page 4: Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

Solution<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

</head>

<body>

<img src="monimage.jpg">

</body>

</html>

Page 5: Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

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 <img>.

Par exemple :<img src="monimage.jpg width=100 height=100>

Page 6: Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

Exercice

Entrainez-vous à modifier les dimensions de l'image utilisée dans l'exercice précédent.

Info : Plutôt que de réduire l'image en utilisant des attributs XHTML, vous pouvez aussi réduire directement l'image en utilisant un logiciel graphique quelconque. PhotoFiltre par exemple. L'image sera alors plus "légère", la page se chargera plus vite et vous n'aurez pas à utiliser les attributs width et height.

Page 7: Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

Utiliser une image comme lien hypermédia Pour qu'une image devienne cliquable et

oriente l'internaute vers une page de votre choix, il suffit d'entourer la balise <img> d'une balise <a> :

<a href="mapage.htm>

<img src="monimage.jpg">

</a>

Page 8: Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

Exercice

Définissez une image cliquable qui pointe vers le site Google.fr

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

Solution<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<style type="text/css">

</style>

</head>

<body>

<a href="http://www.google.fr>

<img src="monimage.jpg">

</a>

</body>

</html>

Page 10: Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

Suppression de la bordure autour d'une image

Lorsque vous définissez un lien hypermédia sur une image, une bordure d'aspect plutôt désagréable entoure l'image.

Pour la faire disparaître, vous initialiserez l'attribut border de la balise <img> à 0 :

Page 11: Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

Exercice

Supprimez la bordure qui apparaît autour de l'image de l'exercice précédent.

Page 12: Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images

Solution<html>

<head>

<style type="text/css">

</style>

</head>

<body>

<a href="http://www.google.fr">

<img src="MVP.jpg" border=0>

</a>

</body>

</html>