3.724 kez okundu

Html de yazının üzerine gelince bilgi kutucuğu çıkartmak

10 10 3.724 kez okundu incelendi

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;

http://resim.sanalkurs.net/uploads/1_457.jpg

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;

http://resim.sanalkurs.net/uploads/2_389.jpg

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

http://resim.sanalkurs.net/uploads/3_328.jpg

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.

Başarılar dilerim.

Paylaş !

Yoruma kapali.

Önceki yazıyı okuyun:
W3 uyumlu flash embed kodu

Web sayfanıza XHTML kurallarına uygun flash embed edebilirsiniz. Web sitelerini XHTML standartlarına uyumlu hale getirmeye çalışırken birçok kez karşılaştığım sorun...

Kapat
Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter