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

Yazımızın ya da linkimizin üzerine mouse geldiği zaman açıklama yapılması durumunda etkili olabilecek bir işlem.

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.

Başarılar dilerim.
  • Etiketler;
Eray Karayel
Bilgileri en kısa sürede eklenecektir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

çok başarılı saol
alt tagı ilede bu işlem yapılabilir benim bildiğim linklerde kullanılıyordu bu genede teşekkürler bilgilendirdiğin için
Ben HTML ve PHP ögrenmek istiyorum. Bana HTML icin hangi programin (Software) gerekli oldugunu ve nereden temin edebilecegimi yazabilirmisiniz. Simdiden tesekürler
Adobe DreamViewer yada Visaul Studio kullanabilirsin. Ben aynı zamanda programlama da yaptığım için Visual Studio yu kullanıyorum. Başlangıç için DreamViewer'i öneririm.
SLm bana sitemin arka planına nasıl mp3 atarım bilen var mı? varsa sölesin ya
slm Arkadaşlar ben bu web sitesi işine yeni başladım ve bi sorunum var öğrenmeyide çok istiyom sorum şu olacak. Aynı Sayfadaki küçük resimin üzerine tıkladığınız Zaman resimin büyümesini istiyom ama bir türlü nasıl olacağını bulamadım yardımcı olursanız çok sevinecem şimdiden çok teşekkür ederim
html dersleri alıyorum..bunları görmemiştim teşekkürler...
Aslında ders almanıza gerek yok. İnternet üzerinde bir dünya eğitim seti var. Onlardan faydalanabilirsiniz.
html dersi alıpta bu basit ayrıntıyı görmemen ilginç.
Tesekkürler peki yazı üstünde resim göstermek için kodları göstermeniz mümkünmü acaba?
tşkler :D
faydali ve anlasilir olmus tesekkurler
şuan okadar işime yaradı kiii size duacığım :)
Windows 10 kurdum. Etkinleştirilmiş değil. Fare imleci ekran üzerinde herhangi bir yere geldiğinde, imlecin yanında bilgilendirme kutucuğu açılıyor. Bu bilgilendirme kutucuğunun açılmasını nasıl engelleriz. Google Chrome, İnternet Explorer, Microsoft Edge ve Windows 10 Posta uygulamasında da oluyor.

Yukarı Git