28 Jun 2010
My Sweet Titles

在看过无数博友的Sweet Titles文章介绍后，终于忍不住在另一个站点上使用了这个酷炫的显示！发现因为IE对alt代码标签的识别，会导致在IE下出现alt内容和Sweet Titles重叠的显示。说下我的解决办法，OK，从头开始：

在站点上载入jQuery库
Sweet Titles效果JS代码：

var sweetTitles = {
	x : 10,								// @Number: x pixel value of current cursor position
	y : 20,								// @Number: y pixel value of current cursor position
	tipElements : "a",	    			// @Array: Allowable elements that can have the toolTip,split with ","
	init : function() {
		$(this.tipElements).mouseover(function(e){
			this.myTitle = this.title;
			this.myHref = this.href;
			this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(,30)+"..." : this.myHref);
			this.title = "";
			var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
			$('body').append(tooltip);
			$('#tooltip')
				.css({
					"opacity":"0.8", // 0.8 为透明度可自行根据喜好调整数字
					"top":(e.pageY+20)+"px",
					"left":(e.pageX+10)+"px"
				}).show('fast');	
		}).mouseout(function(){
			this.title = this.myTitle;
			$('#tooltip').remove();
		}).mousemove(function(e){
			$('#tooltip')
			.css({
				"top":(e.pageY+20)+"px",
				"left":(e.pageX+10)+"px"
			});
		});
	}
};
$(function(){
	sweetTitles.init();
});

Sweet Titles的CSS样式

body div#tooltip { position:absolute;z-index:1000;max-width:240px;width:auto !important;width:240px;background:#000;text-align:left;padding:5px;min-height:1em;}
body div#tooltip p { margin:;padding:;color:#fff;font:12px verdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }

禁止IE显示图片alt标签的js代码（需放在所有图片后）

function RemoveAllAlt(){
	var oimg = document.getElementsByTagName("img");
	for(var i=;i<oimg.length;i++){
		oimg[i].setAttribute("alt","");
	}
}
window.onload = RemoveAllAlt();

具体效果，请移步至 http://about.wheatime.com

Til next time,
Jason at 00:00

scribble

28 Jun 2010My Sweet Titles

28 Jun 2010
My Sweet Titles