Yazının üzerine gelince bilgi kutucuğu çıkartmak

Bu derste sizlere html'in bir özelliğinden bahsedeceğim. İnternette görürüz, bir yazının üzerine gelince bilgi kutucuğu çıkar. Gerek yazının o bölümünü açıklamak, gerekse bakşa amaçlarla kullanıldığını görürüz. Bu kutucukları js veya CSS ile de yapabildiğimiz gibi basit bir yolla HTML ile de yapabiliyoruz. Bunun için "title" kodunu kullanıyoruz. Aynen şöyle:

<font title="Yazımızın burada olduğunu belirtmek istedik">Yazımız normal şekilde burada yazıyor.</font>

dediğimiz zaman görüntü aynen şöyle görünecektir;



Not: Print Screen yaptığımız zaman mouse imleci gözükmediği için bu resimde mouse imlecini göremiyorsunuz. Normalde mouse yazının üzerinde.

Şimdi bir de link üzerinde deneyelim. Onun için de şöyle bir kod yazalım;

<a href="1.JPG" title="Linke gitmek için tıklayınız">Şu anda burada bir link var!..</a>

Bu kod ile de görüntümüz şu şekilde olacaktır;



Not: Demin belirttiğim notu şimdi belirtmek istemiyorum

Hadi bir de resimler üzerinde etkili oluyor mu ona bakalım. Sitemizdeki bir resimin üzerine geldiğinde yazı çıkmasını iztiyorsak şöyle bir örnek gösterebilirim sanırım;

<img src="Günbatımı.jpg" width="231" height="172" title="Resmimizin adı: Gün Batımı" />

Fazla büyük bir resme gerek olmadığı için biraz küçülttüm. Bu resmin üzerine gelelim bakalım kod burada da çalışacak mı?



Evet buradada kodumuz çalıştı...

Daha önce de belirttiğim gibi bu işlemi CSS ile veya Js ile belkide çok daha iyisini yapabiliriz ama bu dersimizde html ile yapılabilecek olanı anlatmaya çalıştım.