- Imaginile incluse în paginile Web pot proveni din diferite surse : alte pagini Web, scanate, desenate cu ajutorul unei aplicatii.
Formatul fisierului în care s-a memorat imaginea trebuie sã fie GIF (extensia .gif, imagini având pânã la 256 culori) sau JPEG (224 = 16777216 culori, fisiere având extensia .jpg).
Dacã aceeasi imagine este folositã pe mai multe pagini, programul de navigatie o va încãrca si memora temporar pe disc reducând timpii de încãrcare a paginilor.
Dacã pagina Web si fisierul care contine imaginea sunt în acelasi folder este suficientã introducerea numelui acestuia. Dacã imaginea este într-un folder derivat trebuie indicatã calea folosind ca si separator caracterul / : imagini/castele/chambord.jpg
Marcajul <CENTER> va centra imaginea în paginã în momentul afisãrii.
Încadrarea unei imagini (adãugarea unui cadru) se indicã prin adãugarea atributului BORDER = n, n fiind lãtimea cadrului, în pixeli. Pentru suprimarea cadrului se va scrie BORDER=0.
<IMG SRC="mark.gif" BORDER=8>
Programele de navigatie permit suprimarea afisãrii imaginilor paginilor. În acest mod se câstigã în vitezã. În marcajul <IMG> se poate include ca si atribut textul care sã fie afisat în locul imaginii, dacã afisarea imaginilor a fost inactivatã :
<IMG SRC="mark.gif" ALT="Poza actorului">
Pentru Netscape, inactivarea afisãrii automate a imaginilor se face modificând optiunea corespunzãtoare din fereastra Preferences :
Dispunerea textului în raport cu o imagine se indicã prin atributul ALIGN. Acesta poate lua valorile left sau right :
<IMG SRC="Lautrec.jpg" ALIGN=left>
Pentru a întrerupe dispunerea textului la dreapta figurii se va include un marcaj <BR> cu atributul CLEAR, valorile posibile ale acesteia fiind left, right sau all.
Se pot pune dispune si douã imagini având textul dispus între ele :
Dispunerea imaginilor pe verticalã presupune combinarea dispunerii lor în paragrafe separate combinatã cu folosirea atributului ALIGN având valorile top, middle sau bottom :
Exemplu :
Mãrirea spatiului dintre marginea unei imagini si text se realizeazã folosind pentru marcajul <IMG> atributele HSPACE (la dreapta sau la stânga) si VSPACE (sus sau jos). Valoarea introdusã reprezintã mãrimea spatiului în pixeli.
<IMG SRC="Lautrec.jpg" ALIGN=left HSPACE=20 VSPACE=20>
Adãugarea unei imagini ca fond al paginii se realizeazã adãugând marcajului <BODY> atributul BACKGROUND :
<BODY BACKGROUND="valuri.jpg">
Imaginea astfel indicatã va fi repetatã în paginã pânã la umplerea acesteia. Imaginea va fi astfel aleasã încât sã nu se observe trecerea de la o copie a acesteia la alta.
Pentru a nu afecta timpul de afisare al paginii este bine ca imaginea sã fie de mici dimensiuni.
Includerea unei linii orizontale se realizeazã folosind marcajul <HR>. Lãtimea liniei se indicã prin atributul SIZE :
Lungimea liniei orizontale se poate indica folosind <HR> cu atributul WIDTH :
<HR WIDTH="60%">
Pentru a dispune o linie orizontalã cadratã la stânga sau la dreapta se foloseste marcajul <HR> cu atributul <ALIGN> având una dintre valorile : left, center sau right.
Liste cu imagini în locul bulinelor se pot realiza plasând la începutul fiecãrei linii un marcaj <IMG> :
<UL>
<BR><IMG SRC="bulina.jpg" ALIGN=middle HSPACE=15>Rachete de tenis de câmp
<BR><IMG SRC="bulina.jpg" ALIGN=middle HSPACE=15>Biciclete
<BR><IMG SRC="bulina.jpg" ALIGN=middle HSPACE=15>Mingi
</UL>
Puteti gãsi imagini utilizabile ca si buline la adresele www.abcgiant.com, www.grapgolina.com/Graphics sau www.theshockzone.com .
Pentru modificarea unei imagini (redimensionare, conversie dintr-un format oarecare în format GIF sau JPEG) se pot utiliza diferite aplicatii, Adobe PhotoShop si PaintShopPro (PSP) fiind douã dintre cele mai cunoscute.
PSP recunoaste multiple tipuri de codificare a imaginilor. Din punct de vedere al includerii imaginilor prelucrate cu PSP într-o paginã Web, este interesant faptul cã acesta afiseazã dimensiunile în pixeli ale imaginii si permite redimensionarea si decuparea dintr-o imagine a unei portiuni.
Redimensionarea (Image / Resize) :
Pentru a nu se deforma în timpul redimensionãrii se va activa optiunea Maintain Aspect Ratio. Apoi se va modifica una dintre dimensiuni, cealaltã modificându-se automat. La versiunea 4 a PSP se va activa în acelasi scop optiunea Pixel Size din aceeasi fereastrã.
La includerea unei imagini într-o paginã Web se pot da dimensiunile pe care aceasta le va ocupa în paginã (atributele WIDTH si HEIGHT). Acestea determinã dimensiunea în pixeli a zonei ocupatã de imagine.
<IMG SRC="liberty.jpg" WIDTH=223 HEIGHT=335>
Dacã zona ocupatã are dimensiuni diferite de cele ale imaginii se va produce o deformare (scalare) a imaginii. Deformarea poate fi uniformã (dacã dimensiunile zonei în care se va afisa imaginea sunt proportionale cu cele ale imaginii) sau neuniformã. Mãrirea exageratã a unei imagini poate conduce la alterarea calitãtii acesteia.
Când este necesarã încãrcarea unei imagini de dimensiuni mari, frecvent se practicã includerea în paginã a unei imagini reduse, a cãrei selectare cu mouse-ul provoacã încãrcarea imaginii de mãrime normalã.
Se poate crea o imagine având mai multe regiuni, fiecare legatã de o paginã Web diferitã. Zonele sensibile la selectarea cu mouse-ul pot fi rectangulare, poligonale sau circulare. Determinarea coordonatelor punctelor care definesc regiunile se poate realiza folosind aplicatia Paint Shop Pro, care afiseazã în permanentã coordonatele cursorului. Marcajele care se vor folosi în acest caz sunt <MAP> si <AREA>. Numele hãrtii se declarã cu ajutorul atributului USEMAP="#nume" introdus în cadrul marcajului <IMG>..
Exemplu :
<IMG SRC="londra.gif" USEMAP="#depozite">
<MAP NAME="depozite">
<AREA SHAPE="rect" COORDS="29,48,52,70" HREF="dep1.html">
<AREA SHAPE="rect" COORDS="39,78,152,120" HREF="dep2.html">
<AREA SHAPE="rect" COORDS="190,38,252,70" HREF="dep3.html">
</MAP>
Pentru declararea zonelor sensibile se va folosi rect pentru zonele dreptunghiulare, circle pentru zonele circulare si poly pentru zonele poligonale având un contur neregulat.
Atributul ONMOUSEOVER
Într-o paginã Web se pot afisa imagini care se se modificã la trecerea mouse-ului peste ele. Aceastã facilitate ar permite de exemplu schimbarea culorii unui buton înaintea actionãrii sale efective.
Exemplu :
<A HREF="egipt.html" ONMOUSEOVER='rollover.src="ramses.jpg"' ONMOUSEOUT='rollover.src="piramida.jpg"'>
<CENTER><IMG SRC="piramida.jpg" NAME="rollover">
</CENTER>
</A>
La trecerea cursorului mouse-ului peste imaginea continutã în fisierul "piramida.jpg" aceasta este înlocuitã cu imaginea continutã în fisierul "ramses.jpg". Deplasarea cursorului în afara zonei imaginii provoacã revenirea la imaginea initialã. Selectarea cu mouse-ul a imaginii ("ramses.jpg") provoacã desigur afisarea paginii Web "egipt.html".
Observatie : atributul ONMOUSEOVER necesitã folosirea atât a ghilimelelor cât si a apostrofului.