OwnZ! StyLe

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">

<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>

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.

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>