Membuat Tooltips pada link
Selasa, September 28, 2010
ryan
,
Tooltips adalah sebuah dokumen pada html yang menampilkan sebuah komen dari link yang di a:hover sehingga link tersebut memiliki sebuah diskripsi singkat menyangkup link tersebut untuk pembuatannya sangat mudah dan terbilang gambang bagi anda yang sudah mempelajari postingan yang terdahulu okelah kalau begitu saya akan tuliskan postingan yang mengacu pada scrift dari pembuatan tooltips ini untuk membuat tool tips ini anda siapkan
dulu gambar contohnya seperti ini:
Untuk pembuatannya menggunakan style.css seperti biasa tetapi dengan deklarator yang berbeda untuk membuatnya tidaklah terlalu sulit maka siapkan dulu notepad anda dan ketikkan kode seperti berikut:
---------------------------------------------------------------------------------------------
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip {
display:block;
position:absolute;
top : 0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(bubble.gif) no-repeat bottom;
}
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip {
display:block;
position:absolute;
top : 0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(bubble.gif) no-repeat bottom;
}
---------------------------------------------------------------------------------------------
dan simpan sebagai file style.css dan buat lagi dokumen html untuk memanggilnya ingat pada postingan sebelumnya disimpan dalam satu folder:
contoh file html
---------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
Text biasa disini <a href="#" class="tt">Text yang akan diberi tooltips<span class="tooltip"><span class="top"></span><span class="middle">Deskripsi dari link yang diberi tooltips | CSS tooltips</span><span class="bottom"></span></span></a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
Text biasa disini <a href="#" class="tt">Text yang akan diberi tooltips<span class="tooltip"><span class="top"></span><span class="middle">Deskripsi dari link yang diberi tooltips | CSS tooltips</span><span class="bottom"></span></span></a>
</body>
</html>
---------------------------------------------------------------------------------------------
setelah itu maka tulisan dalam link anda akan berisi tooltips untuk contoh yang sudah saya buatkan eksklusif buat kalian download disini
0 Response to "Membuat Tooltips pada link"
Posting Komentar