在<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裡面的文字即可修改顯示的文字。
顯示效果：
沒有留言:
張貼留言