ブログ外リンクのプレビューとツールチップのプラグイン（リンクウェア）

サンプルブログ

<a href="http://ameblo.jp/fukushima-heart/">アメブロ運営に役立つ情報</a>
<script src="http://usrcss.ameblo.jp/skin/templates/53/68/10022958648.css"></script>
<script type="text/javascript">
<!--
$(function () {
$('#sub_main a').each(function () {
var myhref = $(this).attr('href');
if (myhref.match(/アメブロID*/)){}else{
$(this).addClass("linkl") ;
}

})
});
//-->
</script>

<script type="text/javascript">
<!--
$(function() {
$().jLinkPreview({
'preload': true, //ロードしておくかどうか
'width': 400, //幅
'height': 300, //高さ
'fade': 300, //フェード時間
'elementsHavingClass': 'linkl', //プレビューさせたいclass
'background-color': '#333' //背景色
});
});
//-->
</script>


CSS
.jLinkPreview {
display:none;
position:fixed;
border:7px #555 solid;
overflow:hidden;
line-height:25px;
border-radius:15px;
-moz-boder-radius:15px;
-khtml-border-radius:15px;
-webkit-border-radius:15px;
color:#FFF;
font-family:Trebuchet MS;
text-align:center;
z-index:9999;
}

div#title-tip {
background-image:url();
background-color:#fff;
border:2px solid #000;
font-size:150%;
font-weight:700;
z-index:9999;
margin-top:38px;
margin-left:-34px;
border-radius:5px;
padding:1px;
}

.tip-top {
background-color:#CCC;
border-radius:5px;
-moz-boder-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
padding:1px;
}

.tip-inner {
background-color:#FFF;
border-radius:5px;
-moz-boder-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
padding:10px;
}

サンプルブログ

マウスオンした要素を赤い枠線で囲む

<script type="text/javascript">
$(function () {
$("*", document.body).hover(function () {
$(this).css({
color: "red",
borderWidth: "1px",
borderStyle: "solid"
});
}, function () {
$(this).removeAttr("style");
});
});
</script>

画面上のクリックした要素名・title・alt・id・classを取得

<script type="text/javascript">
$(function () { /* 画面上のクリックした要素名などを取得 */
$("*", document.body).click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0);
id = $(this).attr("id");　 // idの取得
class = $(this).attr("class");
var title = $(this).attr("title");
var alt = $(this).attr("alt");
$("#res0:first").text(domEl.tagName).css("color", "red");
$("#res1:first").text(id).css("color", "red");
$("#res2:first").text(class).css("color", "red");
$("#res3:first").text(title).css("color", "red");
$("#res4:first").text(alt).css("color", "red");
});
});
</script>