OwnZ! StyLe
  Resim Ekleme-Ayarlar
 
Web sayfaniza Resim eklemek

Resimleri sayfamiza yerlestirmeye yarayan etiketimiz img src="resmin adi" etiketidir. Tirnak isaretlerinin arasina koyacagimiz resmin adini yazariz. Simdi bunu bir örnekle gösterelim:
<img src="cicek.jpg">


<html>
<body>
<img src="1.jpg" height="150" width="150">
<img src="2.jpg" height="150" width="150">
</body>
</html>
   


<img src=*.jpg>�nin Parametreleri

<img align=middle src= bilgisayar.jpg > -> Yazı resmin ortasından hizalanarak yazılmaya başlar
<img align=top src =bilgisayar.gif > -> Yazı resmin üstünden hizalanarak yazılmaya başlar
<img align=left src= bilgisayar.jpg> -> Yazı resmin solundan yazılmaya başlar
<img align=right src= bilgisayar.jpg> -> Yazı resmin sağından hizalanarak yazılmaya başlar
<img src= bilgisayar.gif alt=�????????�> -> Resmin üzerine gelince çıkması istenilen yazı
<img border=0 src=bilgisayar.gif> -> Resmin etrafında çerçeve çıkmasını engeller.


Resmin Ortaya Hizalanmasi
< img src="cicek.jpg align="center">


Resmin Sağa Hizalanmasi
<img src="cicek.jpg" align="right">


Resmin Boyutlandırılması
Resmimizin boyutlarini da belirleyebiliriz. Bunun için resmin genisligini ve yüksekligini yazmamiz gerekir. "width=230 height=252" etiketlerini kodumuza ekleriz.
<img src="cicek.jpg" width=230 height=252>


<html>
<head>
<body>
<img src="7.jpg" width=75 height=75> <br>
<img src="7.jpg" align="center" width=75 height=75><br>
<img src="7.jpg" align="right" width=75 height=75><br>>
</head>
</body>
</html>
   


Resmin üzerine gelince görünen yazi
Mouse'umuzu yani faremizi sayfamizdaki bir resmin ya da grafik unsurun üstüne getirdigimizde görünen açiklama metni koyabiliriz. Bu metinde resmin adi, sitemiz hakkinda bilgi bulunabilir.
<img src="cicek.jpg" width=230 height=252 alt="resimin üstündeyim">
   


Resimlere Link Verme
Resimlere tıkladığımızda gitmek istediğimiz yerin adresini belirlememizi sağlar.
<html>
<body>
<a href="6.jpg"> <img src="6.jpg" height="200" width="200"> </a>
<a href="7.jpg"> <img src="7.jpg" height="200" width="200"> </a>
<a href="8.jpg"> <img src="8.jpg" height="200" width="200"> </a>
</body>
</html>

 


OnMouseOver/OnMouseOut

Onmouseover farenin bir objenin üstüne gelme anıdır.Onmouseout ise farenin obejnin üstünden ayrılma anıdır.Bu iki olay çoğu zaman birbirini tamamlaması için bir arada kullanılır.

Oluşturduğumuz <td> taglarının herbirnin içini aşşağıdaki javascript kodlarını yazarız.

İlk ekrana gelen resime isim veririz ki fare üzeinden çekildiğinde o resim görünsün.

<td><img src="ftm.jpg" width=350 height=350 name="ust"></td>
onmouseover="ust.src='9.jpg'"
onmouseout="ust.src='ftm.jpg'"


<html>
<head>
<title>resimlerim</title>
<body bgcolor="rgb(200,150,185)">
<table align=center border=5 bordercolor=purple>
<tr>
<td colspan=7 align=center><img src="ftm.jpg" width=350 height=350 name="ust"></td>
</tr>
<tr>
<td><img src="9.jpg" width=150 height=150 onmouseover="ust.src='9.jpg'" onmouseout="ust.src='ftm.jpg'"><td>
<td><img src=1.jpg width=150 height=150 onmouseover="ust.src='1.jpg'" onmouseout="ust.src='ftm.jpg'"><td>
<td><img src=2.jpg width=150 height=150 onmouseover="ust.src='2.jpg'" onmouseout="ust.src='ftm.jpg'"><td>
<td><img src=3.jpg width=150 height=150 onmouseover="ust.src='3.jpg'" onmouseout="ust.src='ftm.jpg'"><td>
</tr>
</table>
</body>
</head>
</html>
   






Bu sayfa hakkında yorum ekle:
İsmin:
Mesajınız:

 
  4 ziyaretçi bugün sitemizi ziyaret etti! ( kişi Çevrimiçi )  
 
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=