Nous sommes à l'ère de la photo et c'est très bien. Il est fini le temps des soirées diapos ou, pire, les albums photos qui passaient de mains en mains et où il était de bon ton de s'extasier devant la photo du petit dernier qui a fait sa première dent l'an dernier (il fallait bien attendre que la pellicule soit remplie). Avec le numérique, on dispose de nos photos tout de suite et on peut les diffuser sur Internet ce qui leur permet d'être vues le jour même.

Nous allons voir dans cette section ce que nous pouvons faire avec nos photos. La façon la plus simple d'afficher une photo ou une image se fait de la façon suivante:



La méthode est simple mais présente un inconvénient. Si, comme ici, vous voulez placer du texte, celui-ci débutera tout en bas à droite de l'image.

Pour éviter cela, il y a trois possibilités. La première consiste à placer un saut de ligne <br> directement derrière la balise img et le texte passera directement sous la photo.

La deuxième solution consiste à centrer l'image avec un saut de ligne après. Cela revient au même à la différence qu'ici, la page est plus équilibrée.


Le résultat est guère satisfaisant graphiquement. Pour pallier cet inconvénient, un petit style va être le bienvenu.


Le texte ici
La suite du texte

Le style float:"left"; colle l'image à gauche et fait débuter le texte en haut de l'image. en mettant float:"right";, l'image sera à droite de la page et le texte s'alignera à gauche de l'image. En utilisant clear="all" dans la balise <br>, la suite de votre texte sera placé à gauche sous l'image.

Lorsque vous affichez une photo, veillez à ce qu'elle ne soit pas trop grande. Il n'y a rien de plus désagréable que de devoir faire défiler une image pour pouvoir la voir. Il ne faudrait afficher des photos de 640 x 480 pixels ou, au grand maximum, 800 x 600 pixels s'il s'agit de photos horizontales. Pour les photos verticales, utilisez des tailles plus petites. Il faut que votre visiteur puisse voir la photo dans son intégralité. La plupart ddu temps, vous devrez recadrer votre photo et la redimmensionner. Pour cela, il vous faut utiliser un logiciel de retouche. Windows en propose un mais il n'est vraiment pas terrible. Il en existe des gratuits (réellement) simples mais le meilleur de tous est assurément Gimp qui rivalise avec les meilleurs logiciels commerciaux. Il faut télécharger également l'aide en français (sur la même page). L'adresse pour le télécharger est  https://www.gimp.org/downloads/ 

Ça ne fait pas longtemps que le site est en ligne donc peu connu et malgré ça, j'ai reçu plusieurs mails me faisant remarquer que Gimp est compliqué à appréhender. Je comprends très bien ça car Gimp est issu de Linux qui est un système qui a une philosophie différente de celle de Windows. Je vous mets un lien vers un logiciel beaucoup plus facile d'accès. Il s'agit de Paint Shop Pro 7

---

Il est tout à fait possible d'utiliser une image en guise de lien. La syntaxe ne change pas par rapport à un lien normal.

La même chose

dans un tableau

Comme vous pouvez le constater, l'image remplace purement et simplement le texte du lien. Quand vous passez le curseur de la souris dessus, celui-ci se transforme en main. Dans la balise <img>, j'ai mis deux paramètres width et height qui ne sont pas obligatoires. Les valeurs sont indiquées en pixels. Elles ne sont pas obligatoires mais peuvent être utiles dans certains cas.

La photo du chaton est celle du haut de la page. J'ai modifié les dimensions dans le code. L'original fait 400 x 300 pixels. La petite photo fait 80 x 60 pixels.

Celle-ci fait 400 x 100 pixels

Vous pouvez jouer sur les tailles des images, il suffit de changer les valeurs des paramètres width et height.

---

Nous allons voir maintenant une possibilité de lien à partir d'une image qui est un peu particulière. Nous allons avoir une image avec plusieurs liens distincts dessus.

Cliquez sur les visages

Si vous regardez l'image ci-dessus, elle n'a rien de particulier si ce n'est le fait que si vous passez votre souris sur le visage des personnages, le curseur de la souris se transforme en main, vous êtes sur des liens qui vous dirigent chacun sur une page différente. Ça peut être intéressant pour présenter l'équipe de foot du quartier ou bien, à partir d'une vue générale d'une ville, en présenter les monuments.



Le code est divisé en deux parties. La première partie consiste à afficher l'image. A la balise <img> on a ajouté le paramètre usemap qui indique que l'on va utiliser une "carte cliquable". Notez que le nom de la carte est précédé du caractère # qui est obligatoire.

La deuxième partie du code concerne la carte elle même. Elle est décrite entre les balises <map> et </map> (carte). A cette carte on donne un nom qui sera le même que celui utilisé avec usemap. Dans notre exemple, nous avons 4 zones cliquables donc nous avons 4 balises <area>. Il n'y a pas de balise fermante. Chaque balise contient:

• href= Donnez le nom de la page html à ouvrir
• target= Facultatif. Indiquez la fenêtre dans laquelle s'ouvrira la page (_blank pour un nouvel onglet)
• shape= La forme de la zone cliquable. Il y a trois possibilités:
  1. rect pour une zone rectangulaire
  2. circle pour un cercle
  3. poly pour un polygone quelconque
• coords= Définit les points qui délimitent la zone
• alt= Texte de substitution pour le cas où l'image ne s'affiche pas

Les coordonnées sont indiquées par paire (x,y) ou x est la distance du point au bord gauche de l'image et y est la distance entre le point et le haut de l'image. Pour le rectangle, il faut indiquer les coordonnées de l'angle supérieur gauche et celles de l'angle inférieur ce qui nous donne 4 valeurs. Pour le cercle, nous avons besoin de trois valeurs, les coordonnées du centre du cercle et le rayon du cercle concerné. Pour un polygone, il peut y avoir autant de valeurs que nécessaire.


Il n'est pas pratique de relever les coordonnées des points sur une photo. J'ai pensé que le plus simple était de faire un petit programme qui pallie cet inconvénient.

Après avoir sélectionné votre image (elle s'ouvre dans une fenêtre à côté de la fenêtre principale), choisissez le type de forme que vous désirez. Remplissez les 3 zones. Laissez la zone target vide si vous ne voulez pas ouvrir votre page dans un nouvel onglet. Si vous faites un polygone, cliquez sur "Ok polygnone". Si vous désirez plusieurs dormes, recommencez en choisissant la nouvelle forme. Une fis terminé, cliquez sur "créer la carte". Le programme se ferme. Dans votre page de code, utilisez Ctrl-V pour coller le code généré.

 Télécharger MapHTML.exe            Télécharger la DLL 

---

L'image des mousquetaires est présentée avec le même style que la photo du chaton. Le texte n'est pas sur l'image mais ajouté à l'aide du CSS. Le principe est simple. On crée un DIV de la même largeur que la photo et avec une hauteur un peu supérieure de façon à pouvoir y mettre le texte.


width:400px; Le div aura la même largeur que la photo du chaton
height:320px; La hauteur fait 20 pixels de plus que celle de la photo
background-color:yellow; Le fond est jaune
padding:0px; Il n'y a pas de marges intérieures au div
padding-bottom:6px; La marge du bas sert à centrer verticalement le texte
color:green; Le texte est vert
float:left; Permet de mettre du texte à droite de la photo
margin-right:8px Le texte à droite de la photo ne sera pas collée dessus

Toute la déclaration du style peut tenir sur une seule et même ligne. Je ne l'ai découpée que pour la clarté. La déclaration de la photo est suivie d'un passage à la ligne pour obliger le texte à se placer sous la photo. Le float:left; ne concerne que la balise div. Le texte est centré et le L initial est mis en gras. Les balises <b> </b> auraient pu être remplacées par <span style="font-weight:bold;"> </span>. Les deux solutions reviennent au même résultat.

---

Il reste une utilisation des images dont nous n'avons pas encore parlé, ce sont les fonds. De nombreuses balises comme <div>, <body>, <td> etc. peuvent recevoir un fond.







Voici les 9 possibilités d'image de fond les plus utilisées. L'élément peut être garni complètement avec l'image de fond, les bords peuvent également être utilisés de même que les angles. Ce n'est qu'une affaire de déclaration de style.


Le petit cochon en bas de la page est placé par background-position: bottom right; background-repeat: no-repeat;.

Vous pensez que c'est fini, et bien non, on peut en rajouter un peu.





Tout cela mérite quelques explications. Nous avons deux div l'un dans l'autre. Le premier contient uniquement l'image du haut à gauche et supporte le fond dégradé.

width:640px;height:480px; Donne le format de l'image. 640 x 480 pixels, c'était la définition des écrans il y a quelques années quand j'ai commencé à taper sur un clavier.

background:linear-gradient(blue, green); C'est le dégradé. Nous y reviendrons plus loin car le fonctionnement dépend des navigateurs. Tel qu'il est là, il devrait fonctionner sur la plupart des navigateurs récents.

padding:0px; Pas de marge intérieure au div.

<img src="images/balles.gif" width="258" height="264" style="float:left;"> Insertion de l'image du haut. Il s'agit d'un gif transparent (version 89a). Le float va permettre d'écrire à partir du haut de l'image.

<div style=" Ouverture du div intérieur

height:100%;width:100%; Il occupe la totalité de la surface du 1er div

background-image: url(images/croco.gif); Le div reçoit une image de fond

background-position:bottom right; On place le croco en bas à droite

background-repeat:no-repeat; Le croco n'est présent qu'une fois

Le reste se passe de commentaire

 Les formulaires