Comment afficher des images sur une page web?

Quelques images sur votre site Web le rendront plus attractif. Cependant il ne faut pas sombrer dans l'excès car les images impliquent un temps de chargement assez long.

Les images peuvent être sur le même ordinateur que la page ou bien ailleurs sur un autre site (il faudra veiller à ce que l'image soit alors accessible).

Il y a grossièrement deux formats d'images que vous pouvez inclure dans votre page:

On utilise le marqueur <IMG> pour inclure une image, il ne crée pas de retour à la ligne.
Ses trois principaux attributs sont:

Ainsi pour insérer une image, il faudra saisir un marqueur du genre:
<IMG SRC="url/image.gif ou url/image.jpg" ALT="Texte remplaçant l'image">

Attribut Valeur Résultat Effet Visuel
SRC    Adresse de l'image   
BORDER=n    Nombre de pixels de la bordure.
Sa couleur se définit dans l'attribut
LINK ou TEXT de la balise <BODY>
HSPACE    Nombre de pixels d'ajustement
entre l'image et le texte adjacent
VSPACE    Nombre de pixels d'ajustement
entre l'image et le texte au-dessus
WIDTH    Taille horizontale (en pixels ou en %)
HEIGHT    Taille verticale (en pixels ou en %)
LOWSRC URL Image alternative (plus petite) affichée
le temps que la vraie soit chargée

Texte enveloppant une image

Les images s'insèrent dans le texte comme un caractère, ainsi il semble impossible de faire s'écouler du texte le long d'une image.

Il existe en fait plusieurs façons, nous allons en voir deux:

Les images réactives ("images MAP")

On peut créer à l'intérieur même d'une image des zones cliquables.
Cela est possible grâce à l'attribut USEMAP utilisé conjointement avec la balise <MAP> ... </MAP>.
L'attribut USEMAP de la balise <IMG> pointe vers la balise <MAP> contenant le découpage.

La balise <MAP> a pour attribut le nom qu'on lui donne (NAME="nom") et contient les zones cliquables déclarées par les balises <AREA> ... </AREA>.

Balises Attribut Valeur Effet Visuel
<MAP> ... </MAP> NAME    
<AREA> SHAPE RECT

 

CIRCLE

 

POLY

 Rectangle (ses coordonnées sont:
"abscisse sup gauche, ordonnée sup gauche,
abscisse inf droit, ordonnée inf droit")

Cercle (ses coordonnées sont:
"abscisse centre, ordonnée centre, rayon")

Polygone (ses coordonnées sont:
"la suite des coordonnées séparées par des
virgules")
HREF="url"   Lien vers l'URL
COORDS=
"XX,XX,XX,XX"		   Contient les coordonnées de la zone
cliquable entre guillemets et
séparées par des virgules

Un exemple

<IMG SRC="images/image.gif" WIDTH=150 HEIGHT=70 USEMAP="#Map">

<MAP NAME="#Map">

<AREA SHAPE="rect" HREF="debut.html" COORDS="0,0,48,28">

<AREA SHAPE="circle" HREF="precedent.html" COORDS="50,30,10">

<AREA SHAPE="poly" HREF="suivant.html" COORDS="60,50,80,30,100,40,50,100">

</MAP>


 

 

 

 











Ajouter aux Favoris Ajouter aux votre page
 

 


Acceuil | Forum| Contactez-Nous | Annace |Chat| Music |Radios|Sockets |Protocoles|Windows NT
Langage C |Langage C++ | Assembleur | Java | Perl |Pascal/delphi | Visual basic|MERISE | SQL| JDBC| ODBC
ASP|CGI |HTML |DHTML |XML|Javascript |JSP |PHP|Servlets |VBScript |WAP |UNIX |Linux |MacOS|Windows 9x
Assemblage-PC |Modèle relationnel|Histoire-PC|Fonctionnement-PC|photo pour rire|MS-Dos|Architecture-PC
Flash MX |Word-2003|Power Point|Excel|Langage C|Langage Java|Visual Basic|La base XP | programming
Physique Arabic partie I|Programation en arabe|Physique Français|Internet| Sécurité Informatique
HTML |Agebre en Français|Math Français partie I|Physique Arabic partie II| الطرق العددية
Electricité| Math Français partie II|Math en Arabic|Agebre en Arabic| الأعداد العقدية
Tous les cours informatiques en vidéos |Droit Informatique |logiciels
Tous les cours physiques en vidéos |Microsoft office
Cours math en vidéos | Msn en ligne
TV Live


Autoformations les cours informatiques en vidéos gratuitement
:: Copyright © 2008 http://www.autoformations.co.cc All rights reserved ::