22 March 2010

Tooltip munculkan deskripsi gambar / link

          Tooltip akan memunculkan deskripsi atau Keterangan dari gambar / link apabila pointer berada di atasnya.
Sebelum saya jelaskan mengenai cara membuat tooltip pada gambar maupun link alangkah baiknya saya terangkan dulu apa itu tooltip.

          Bagi para blogger yang sudah bangkotan tentu bukan merupakan hal yang baru tetapi bagi yang masih pemula mungkin tulisan ini akan sangat berguna. Tooltip merupakan deskripsi atau keterangan dari suatu gambar atau link, yang muncul ketika pointer diletakkan di atasnya.

          Awalnya saya sendiri tidak tahu dan tidak ada niatan untuk mencari tahu apa itu tooltip, namun secara tidak sengaja ketika buka blog teman eh… ternyata ada artikel yang membahas tentang tooltip. Untuk itu saya ucapkan terimakasih kepada http://pelajaran-blog.blogspot.com berkat artikelnya saya mendapatkan banyak pelajaran blog termasuk tentang cara membuat tooltip dan menerapkannya di blog.

          Dengan adanya tooltip, pembaca akan mendapatkan deskripsi dari gambar atau link yang mereka sorot ketika pointernya berada di atas gambar dan juga link tersebut.

Untuk lebih jelasnya coba saja anda letakkan mouse pointer
pada gambar di bawah ini :

rey

Atau link di bawah ini :

Bagaimana…Mau tau cara membuatnya?
Baca tulisan ini sampai selesai… :d

Baiklah saya jelaskan caranya sederhana, tinggal menyisipkan:

Title="Text Tooltip Yang akan Muncul"

Contoh pemakaian kodenya seperti ini:
<img src="http://2.bp.blogspot.com/_ebUnF7PUwY0/S6dzBSm4ojI/AAAAAAAAAYQ/jkaivpYO2ko/s200/pemilik%20brugkembar.jpg" title="Pemuda ganteng banyak cewek yang naksir">

Selain diterapkan pada gambar, dapat pula diterapkan pada link.
Contoh penerapan pada link, kodenya seperti ini:
<a href="http://brugkembar.blogspot.com/" title="Blognya ORTEGA alias Orang Tegal Asli">Brugkembar-Jembatan Ilmu</a>

Keterangan:
Untuk teks yang berwarna merah adalah kode gambar, teks yang berwarna biru adalah kode link, yang  dicetak tebal adalah kalimat yang akan muncul di dalam kotak tooltip, silahkan ganti dengan kalimat yang lain.

Nah mulai sekarang apabila membuat postingan yang ada gambar maupun linknya, sertakan tooltipnya. Tapi bila kemunculan tooltip ini dirasa mengganggu, ya jangan disertakan, itu semua terserah anda.

2 comments:

  1. gan...kalo text yang tooltipnya gambar gimana??
    bisa gak??
    tapi gk pake jquery..css only :D

    ReplyDelete

Note: Only a member of this blog may post a comment.