Html Images - Html Resimler

Web sayfalarinda bir resim gostermek istedigimizde img etiketini kullaniriz.


<img src="resim.jpg" alt="Burda Resim Var" title="Guzel Bir Resim" 
width="150px" height="100px" border="1" />
		
Burda Resim Var
img elementine ait niteliklere bakalim
  • src:Kaynak resmin adresi
  • alt:src kaynaginda bu isimde resim yoksa(baglanti sorunlari vs) ,kullaniciya gosterilecek alternatif metin
  • title:imleci resim uzerine getirdigimizde imlecin yaninda gorunecek kucuk aciklama metni(Deneyin ve gorun)
  • width:Resmin genislik degeri (px,%,... olabilir)
  • height:Resmin yukseklik degeri (px,%,... olabilir)
  • border:Resmin etrafindaki kenarlik cizgi kalinligi.
1-width/height orani bozulursa resim de duzgun gorunmeyecektir
2-width/height degerinin verilmesi sayfanin yuklenmesi acisindan pozitif etkiye sahiptir.
3-alt/title degerlerinin yazilmasi arama motorlari acisindan dikkate alinir.

Baska Klasordeki Görüntüler

<img src="resimler/resim.png" alt="Resim Var" title="Png Resmi">

Ust Klasordeki Görüntüler (../ kullanimi ust klasoru ifade eder)

<img src="../resim.png" alt="Resim Var" title="Png Resmi">

Baska Siteden Görüntüler

<img src="http://www.baskasite.com/images/resim.png">

Resmin bir link olarak kullanilmasi

<a href="#">
		<img src="img/resim.jpg" alt="Alt Degeri" title="Title Degeri" border="0">
</a>
Yukardaki link href='#' kullanimi nedeniyle bulundugumuz sayfadan cikmaz!

Fare Duyarli Görüntüler/Goruntu Haritalari/Image Maps

Su ana kadar bir goruntuye tikladik ve bir linke gittik, bazen tek bir goruntu uzerinde oyle noktalar olusturulabilirki tiklaninca farkli adreslere gidilebilir.

<img src="img/image_map.jpg" usemap="#geometri" alt="Image Map Resmi"  width="227" height="142">

<map name="geometri">
	<area shape="rect" coords="2,19,87,66" href="index.php" title="Tiklanabilir">
	<area shape="circle" coords="164,60,33" href="html_links.php" title="Tiklanabilir">
	<area shape="poly" coords="12,126,29,83,86,94,109,81,165,118,129,131,93,121,82,133,37,132" href="html_paragraphs.php" title="Tiklanabilir">
</map>
Image Map Resmi
Yukardaki resmi Photoshop ile basitce hazirladim,amacim asagda anlattigim koordinatlari daha kolay bulmakti.
shape='rect':Diktortgenin sol ust x1,y1 koordinati ve sag alt x2,y2 koordinati, coords='x1,y1,x2,y2'
shape='circle':Dairenin merkezinin x1,y1 koordinati ve yaricap uzunlugu, coords='x1,y1,r'
shape='poly':Duzensiz ve cok koseli olabilecek geometrik seklin kose koordinatlari coords='x1,y1,x2,y2,.....,Xn,Yn'
Bu arada resmin sol ust kosesi x1,y1=(0,0) ve sol alt kosesi Xw,Yh=(Resim width,Resim height)
(Ornegimizde usemap="#geometri" degerinin name='geometri' degerine isaret ettigini gorduk degil mi?)
Web'de daha cok jpeg formatindaki resimlerin kullanildigini goruyoruz(pixel tabanli),fakat png formati ise oldukca net goruntuler sunabilmektedir(vektor tabanli),diger onemli format ise GIF dosyalaridir(hareketli resimler).

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com