[
2006/04/10(月) ]
タイトルをズームイン表示させる JavaScript のサンプルです。
※ズームイン表示のサンプル
■JavaScript 記述例 (<head> 〜 </head> 内に記述)
<SCRIPT language=JavaScript>
<!--
var text_size = 0
function sizeChange() {
if(text_size < 25) {
text_size = text_size + 2
var text_size_s = text_size + "px"
document.all.title.style.fontSize = text_size_s
timerID = setTimeout("sizeChange()",50)
} else {
clearTimeout(timerID)
document.all.title.style.color = "red"
document.bgColor="black"
}}
//-->
</SCRIPT>
onload="sizeChange()" を、bodyタグ内に記述する。
※表記例; <body onload="sizeChange()">
※タイトル表記部分を以下のように記述する。
<h1 id="title"><a href="<%url>"><%blog_name></a></h1>
※タイトル表記部分のCSSを以下のように記述
#title {
font-size: 14px; color: #333;
margin: 10px 0px 0px 0px; padding: 5px;
}
・フォントサイズは、初期値の大きさです。
(JavaScriptが正常に動作しない場合を考慮し、小さくしすぎないように)
・マージンやパディングなどのスペースは適当に
JAVAスクリプト〜サンプル置き場
※ズームイン表示のサンプル
■JavaScript 記述例 (<head> 〜 </head> 内に記述)
<SCRIPT language=JavaScript>
<!--
var text_size = 0
function sizeChange() {
if(text_size < 25) {
text_size = text_size + 2
var text_size_s = text_size + "px"
document.all.title.style.fontSize = text_size_s
timerID = setTimeout("sizeChange()",50)
} else {
clearTimeout(timerID)
document.all.title.style.color = "red"
document.bgColor="black"
}}
//-->
</SCRIPT>
onload="sizeChange()" を、bodyタグ内に記述する。
※表記例; <body onload="sizeChange()">
※タイトル表記部分を以下のように記述する。
<h1 id="title"><a href="<%url>"><%blog_name></a></h1>
※タイトル表記部分のCSSを以下のように記述
#title {
font-size: 14px; color: #333;
margin: 10px 0px 0px 0px; padding: 5px;
}
・フォントサイズは、初期値の大きさです。
(JavaScriptが正常に動作しない場合を考慮し、小さくしすぎないように)
・マージンやパディングなどのスペースは適当に
JAVAスクリプト〜サンプル置き場関連タグ : Javaスクリプト