在 <href>超連結的語法中有一個屬性title，正常的顯示是四方不是很醜也不是很美的提示我們這個超連結在做什麼，在此範例中透過CSS及Javascript的方式將此提示文字顯示的較為美觀。
在<head></head>間加入此段CSS：
<style type="text/css" media="screen">
<!--
/* Nice Title - CSS標籤，請加入在<head></head>之間*/
div.nicetitle {
font-family: "Geneva", "Arial", "Helvetica", sans-serif;
position: absolute;
padding: 4px;
top: 0;
left: 0;
font-size: 10pt;
background-color: #CCCCFF;
color: #000000;
border: 1px solid;
-moz-border-radius: 10px; /* mozilla or firefox的圓角效果*/
}
div.nicetitle p {
margin: 0;
padding: 0 3px 0 3px;
color: #000000;
}
div.nicetitle p.destination {
font-family: "Times New Roman", "Times", serif;
font-size: 8pt;
text-align: left;
padding-top: 3px;
font-style: italic;
font-weight: lighter;
}
-->
</style>
在<head></head>間加入這段Javascript：
<script type="text/javascript">
<!--
/* 讓href的註解文字更漂亮，需配合CSS Nice Title */
addEvent(window, "load", makeNiceTitles);
var CURRENT_NICE_TITLE;
var browser = new Browser();
function makeNiceTitles() {
if (!document.links || !document.createElement) return;
for (var ti=0;ti<document.links.length;ti++) {
var lnk = document.links[ti];
if (lnk.title) {
lnk.setAttribute("nicetitle",lnk.title);
lnk.removeAttribute("title");
addEvent(lnk,"mouseover",showNiceTitle);
addEvent(lnk,"mouseout",hideNiceTitle);
}
}
}
function showNiceTitle(e) {
if (!document.getElementsByTagName) return;
if (window.event && window.event.srcElement) {
lnk = window.event.srcElement
} else if (e && e.target) {
lnk = e.target
}
if (!lnk) return;
if (lnk.nodeType == 3 || lnk.tagName.toLowerCase() != "a") {
// lnk is a textnode -- ascend parents until we hit a link
lnk = getParent(lnk,"A");
}
nicetitle = lnk.getAttribute("nicetitle");
if (!lnk) return;
var d = document.createElement("div");
d.className = "nicetitle";
d.innerHTML = '<p class="titletext">' + nicetitle + '</p><p class="destination">'+lnk.href+'</p>';
STD_WIDTH = 300;
h = lnk.href.length; t = nicetitle.length;
h_pixels = h*6; t_pixels = t*10;
if (h_pixels > STD_WIDTH) {
w = h_pixels;
} else if ((STD_WIDTH>t_pixels) && (t_pixels>h_pixels)) {
w = t_pixels;
} else if ((STD_WIDTH>t_pixels) && (h_pixels>t_pixels)) {
w = h_pixels;
} else {
w = STD_WIDTH;
}
d.style.width = w + 'px';
xy = getMousePosition(e);
mx = xy[0]; my = xy[1];
d.style.left = (mx+15) + 'px';
d.style.top = (my+15) + 'px';
if (document.body && document.body.offsetWidth && ((mx+w) > document.body.offsetWidth)) {
d.style.left = (document.body.offsetWidth - w - 20) + "px";
}
document.getElementsByTagName("body")[0].appendChild(d);
CURRENT_NICE_TITLE = d;
}
function hideNiceTitle(e) {
if (!document.getElementsByTagName) return;
if (CURRENT_NICE_TITLE) {
document.getElementsByTagName("body")[0].removeChild(CURRENT_NICE_TITLE);
CURRENT_NICE_TITLE = null;
}
}
// Add an eventListener to browsers that can do it somehow.
// Originally by the amazing Scott Andrew.
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
function getMousePosition(event) {
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
return [x,y];
}
// Determine browser and version.
function Browser() {
// blah, browser detect, but mouse-position stuff doesn't work any other way
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userAgent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}
function viewComments(n) {
window.open('http://www.philringnalda.com/dc/comments.php?' + n, 'comments' + n, 'directories=0,height=480,location=0,resizable=1,scrollbars=1,toolbar=0,width=515');
}
function gothere(where) {
// called by a select menu with <select onChange="gothere(this)">
// and options like <option value="url">link name</option>
if(document.createElement){
newLink = document.createElement("A");
if (newLink.click){
newLink.href = where.options[where.selectedIndex].value;
theBod = document.getElementsByTagName("BODY");
theBod[0].appendChild(newLink);
newLink.click();
}
else{
location.href = where.options[where.selectedIndex].value;
}
}
else {
location.href = where.options[where.selectedIndex].value;
}
}
function obfuscate_email()
{
email_start = "mailto:mtblo";
email_end = "gnalda.com";
email_middle = "g@philrin";
return email_start + email_middle + email_end;
}
-->
</script>
</head>
在<body></body>間加入這段HTML：
<body>
<a href="http://doc.blogdns.org" title="DOC社群連播網--這是RSS彙整系統如當日文件較多，載入會稍慢，請耐心等待。另外補充，為提升系統效率，系統資料每小時才會更新一次，請不要一直按RELOAD。"><img src="http://doc.blogdns.org/i/doc_logo.gif" alt="Online-DOC" border="0" /></a>
</body>
將滑鼠移到圖示中，即會顯示。修改title裡面的文字即可修改顯示的文字。
顯示效果：
