ホームページ作成 title 属性を保持したい
初心者ですが、jQueryやJavaScriptなどの初心者用ページを見ながら、目的とするページができるように見よう見まねでコピペしてなんとか作っています。
やりたいこと
(1) 問題の空欄にカーソルを当てると答が出現すること。
(2) 問題をソートすること。
ここまではできましたが、ソートするとポップアップの属性が消えてしまい、小さな字になってしまいます。
ソートしてももとの属性で大きな字で出したいのです。
ページを見てもらったほうがいいかと思いアドレスを載せておきます。ご検討ください。
http://issangogo.sakura.ne.jp/weblib2011-1-2/narabekae10.html
以下は記述文です
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.balloon.js"></script>
<title>時計</title>
<script>
var tds = [
["This clock is ten minutes <a title='slow'>(________)</a>.<br>この時計は１０分遅れている",""," "],
["This clock is ten minutes <a title='fast'>(________).<br>この時計は１０分進んでいる",""," "],
["This clock <a title='loses'>(________) a minute a day.<br>この時計は１日に１分遅れる",""," "],
["This clock <a title='gains'>(________) a minute a day.<br>この時計は１日に１分進む",""," "]
];
$(function() {
function draw() {
var tag = '';
$.each(tds, function(i, val) {
tag += '<tr><td>'+ val[0] + '</td><td>' + val[1] + '</td><td>' + val[2] + '</td></tr>';
});
$('tbody').html(tag);
}
$('th').click(function() {
var arrow = $('span', this);
var col = $('th').index(this);
tds.sort(function(a, b) { return Math.random() < Math.random() ? -1 : 1; });
$(this).siblings().find('span').html('');
draw();
});
draw();
});
</script>
<style>
th, td {
border: 1px solid black;
padding: 2px;
}
th {
background-color: #ccc;
cursor: pointer;
}
</style>
<style type="text/css">
<!--
div#title-tip {
margin: 0 3em 0 3;
border: solid #ccc 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: .3em .10em;
background: #fff;
opacity: .8;
filter: alpha(opacity=80);
font-size: 140%;
}
-->
</style>
<script type="text/javascript">
$(function(){
// 全要素をからTITLE属性を持っている要素だけに絞る
$("body *").filter(function(){
return this.title && this.title.length>0;
}).each(function(){
// TITLE属性を持っている要素に適用する
// あとで使う
var self = $(this), title = self.attr("title");
// TITLE属性を持っている要素にhover()で
self.hover(
// mouseover
function(e){ // このeはevent自体を意味する
// TITLEがあるとブラウザのチップが出るので一時的に空にしておく
self.attr("title","");
// とりあえず表示するtip要素を生成しておく
$("body").append("<div id='title-tip'>"+title+"</div>");
$("#title-tip").css({
position: "absolute",
// e.pageX(Y)でカーソルが要素に乗った時点でのX(Y)座標を取得する
top: e.pageY+(-15), // カーソルと表示したtipが重なるとチラつくので少
しずらす
left: e.pageX+15
});
},
// mouseout
function(){
// mouseoverで空にしたTITLEを戻す
self.attr("title",title);
// 要素から離れた場合はtipを非表示にして削除しておく
$("#title-tip").hide().remove();
}
);
// 要素上でカーソルが移動した場合は、逐一tipの位置を変える
self.mousemove(function(e){
$("#title-tip").css({
top: e.pageY+(-15),
left: e.pageX+15
});
});
});
});
</script>
</head>
<body bgcolor="YellowGreen">
<font size=5>
<table><thead><tr><th>問 題 ソート<span></span></th><th>__ヒント１__<span></span></th><th>___ヒント２
___<span></span></th></tr></thead><tbody></tbody></table>
</font>
</body>
</html>
