美化Title的新選擇

就是Beata這個站目前所使用的Title美化，如果連結有設置title屬性的話，那麼滑鼠移到連結之上便會產生一個紅色的小說明欄。

滑鼠移到我身上

這份title美化的JS是基於prototype-lite這套JS原型所誕生的。

只要是網頁都能用，但須下載moo.fx，因為需要使用到其中的prototype.lite.js檔案。

如果已安裝過Ajax Comments-Reply就不用再下載moo.fx了。

去除prototype.lite的JS部份，檔案大小差不多1K左右吧～
再加上prototype.lite可以做很多有趣的事情，挺划算的！


CSS部份:

css · [高亮] · [原始]

  1. #tip{padding:4px 10px;border-color:#F00;display: none;background: #900;color: #FFF;position: absolute;z-index: 1000;-moz-border-radius:7px 7px 7px 0;opacity:0.7;filter:alpha(opacity=70)}
  2. #tip p{opacity:1;filter:alpha(opacity=100)}
#tip{padding:4px 10px;border-color:#F00;display: none;background: #900;color: #FFF;position: absolute;z-index: 1000;-moz-border-radius:7px 7px 7px 0;opacity:0.7;filter:alpha(opacity=70)}
#tip p{opacity:1;filter:alpha(opacity=100)}

[高亮] · [原始] · css

JS部份:
請存成JS檔連同prototype.lite.js一起引入文件開頭標籤之內
e.g:
<script src= "prototype.lite.js "></script>
<script src= "tip.js"></script>(安裝過Ajax Comments-Reply 只需加上這句即可)
或直接下載 tip.js

javascript · [高亮] · [原始]

  1. var D = document;
  2. Tip = {
  3.     act: function() {
  4.         var es = D.getElementsByTagName(‘a’);
  5.         var c = $(‘tip’);
  6.         if (!c) {
  7.             var c = D.createElement(‘div’);
  8.             c.setAttribute(‘id’, ‘tip’);
  9.             D.getElementsByTagName(‘body’)[0].appendChild(c);
  10.         }
  11.         $c(es).each(
  12.             function(e) { var t = e.getAttribute(‘title’);
  13.             if (t) {
  14.                 e.setAttribute(‘tip’, t);
  15.                 e.removeAttribute(‘title’);
  16.                 var p = Position.cumulativeOffset(e);
  17.                 e.onmouseover = function() {
  18.                     c.style.left = (p[0]+10)+‘px’;
  19.                     c.style.top = (p[1]+30)+‘px’;
  20.                     Tip.display(c, e.getAttribute(‘tip’));
  21.                 };
  22.                 e.onmouseout = function() {Tip.display(c)};}
  23.             });
  24.     },
  25.    
  26.     display: function(c, t) {
  27.         if (t) {
  28.             c.innerHTML = ‘<p>’+t+‘</p>’;
  29.             c.style.display = ‘block’;
  30.             _O(c, 800).custom(0, 0.8);
  31.         } else {
  32.             c.innerHTML = ”;
  33.             c.style.display = ‘none’;
  34.         }
  35.     }
  36. }
  37. function _O(e, t) {
  38.     if (!t) t = 500;
  39.     var ef = new fx.Opacity(e, {duration: t, onComplete:function(){}});
  40.     return ef;
  41. }
  42. window.onload = Tip.act;
var D = document;
Tip = {
	act: function() {
		var es = D.getElementsByTagName(\'a\');
		var c = $(\'tip\');
		if (!c) {
			var c = D.createElement(\'div\');
			c.setAttribute(\'id\', \'tip\');
			D.getElementsByTagName(\'body\')[0].appendChild(c);
		}
		$c(es).each(
			function(e) { var t = e.getAttribute(\'title\');
			if (t) {
				e.setAttribute(\'tip\', t);
				e.removeAttribute(\'title\');
				var p = Position.cumulativeOffset(e);
				e.onmouseover = function() {
					c.style.left = (p[0]+10)+\'px\';
					c.style.top = (p[1]+30)+\'px\';
					Tip.display(c, e.getAttribute(\'tip\'));
				};
				e.onmouseout = function() {Tip.display(c)};}
			});
	},

	display: function(c, t) {
		if (t) {
			c.innerHTML = \'<p>\'+t+\'</p>\';
			c.style.display = \'block\';
			_O(c, 800).custom(0, 0.8);
		} else {
			c.innerHTML = \'\';
			c.style.display = \'none\';
		}
	}
}
function _O(e, t) {
	if (!t) t = 500;
	var ef = new fx.Opacity(e, {duration: t, onComplete:function(){}});
	return ef;
}
window.onload = Tip.act;

[高亮] · [原始] · javascript


3 Responses to “美化Title的新選擇”

  1. 小明 Says:
    七月 20th, 2006 at 2:52 下午

    非常感谢
    懒懒猫一点都不懒

  2. 小明 Says:
    七月 20th, 2006 at 2:55 下午

    你的友情链接是怎么做的，其实我更想问那个，－－！ 呵呵 懒懒猫 谢谢

  3. 茶 Says:
    十二月 2nd, 2006 at 5:04 下午

    :注意:
    挖!!
    真是棒

Leave a Comment