|
★携帯・PC対応 無料ホームページ作成サービス
※初心者でも無料でホームページが作成可能 ★FC2 無料ホームページ スペース ※商用利用やアフィリエイト広告の設置制限なく携帯サイトにも対応 ★無料で使える容量無制限レンタルサーバー ※独自のCGI（ホームページを演出するプログラム）設置可能 ★初心者でも安心、容量無制限の格安レンタルサーバー ※月200円＋容量無制限＋初期設定費用無し！ブログも作成可能 |
|
［
2007/01/28(日) ］
◎ マウスのオン、オフでオブジェクトの背景色を変更させる
カーソルがオブジェクトにふれると背景色が変化し、カーソルがオブジェクトから離れると、元の背景色に戻ります。
▼ サンプル
▼ ソース
<div style="background-Color:gold;width:260px;border:solid 1px #555555;font-size:16px;"><div onmouseover="this.style.backgroundColor='#ffcccc'" onmouseout="this.style.backgroundColor='gold'" style="padding:3px;">
オブジェクトの背景色変更
</div></div>
≫[オブジェクトの背景色を変更]の続きを読む
関連タグ ： Javaスクリプト,
［
2006/04/10(月) ］
■リンクページの開き方を指定するJavaScript
サイト内のリンクページの開き方を指定できます（Blank or Self）
※サンプルページ ⇒ リンクページの開き方を指定
▼JavaScript ソース
<script type="text/javascript">
<!--
/***********************************************************
* リンクの開き方を指定するスクリプト - By Nobu
* JavaScriptサンプル置き場 - http://www3.ocn.ne.jp/~motiya/
* スクリプトの利用はご自由に！（自己責任のもとでのご利用をお願い致します）
* リンクして頂けたら ”超うれしい！”（任意；ご報告はいりません）
***********************************************************/
var newwindow="_blank"
function nobulinks(target){
if (target) where = newwindow;
else where = "_self";
for (var i=0; i<=(document.links.length-1); i++){
var linkobj=document.links[i].href
if ( linkobj.indexOf("javascript:") ==-1 && linkobj.indexOf("#") ==-1){
if (target && where!="_blank")
document.links[i].onclick=function(){
if (window.window2 && !window2.closed)
window2.location=this.href
else
window2=window.open(this.href)
window2.focus()
return false
}
else{
if (newwindow=="window2") document.links[i].onclick = "";
document.links[i].target = where;
}}
}}
function initnobulinks(){
if (document.linkform.targetblank.checked)
nobulinks(true)
}
window.onload=initnobulinks
// -->
</script>
▼チェックボックス部分のソース
<FORM name="linkform" style="margin:5 0 0 0;"><INPUT
TYPE="checkbox" NAME="targetblank" ONCLICK="nobulinks(this.checked)"
checked> <b>チェックするとリンクが新しい窓で開きます</b></FORM>
サイト内のリンクページの開き方を指定できます（Blank or Self）
※サンプルページ ⇒ リンクページの開き方を指定
▼JavaScript ソース
<script type="text/javascript">
<!--
/***********************************************************
* リンクの開き方を指定するスクリプト - By Nobu
* JavaScriptサンプル置き場 - http://www3.ocn.ne.jp/~motiya/
* スクリプトの利用はご自由に！（自己責任のもとでのご利用をお願い致します）
* リンクして頂けたら ”超うれしい！”（任意；ご報告はいりません）
***********************************************************/
var newwindow="_blank"
function nobulinks(target){
if (target) where = newwindow;
else where = "_self";
for (var i=0; i<=(document.links.length-1); i++){
var linkobj=document.links[i].href
if ( linkobj.indexOf("javascript:") ==-1 && linkobj.indexOf("#") ==-1){
if (target && where!="_blank")
document.links[i].onclick=function(){
if (window.window2 && !window2.closed)
window2.location=this.href
else
window2=window.open(this.href)
window2.focus()
return false
}
else{
if (newwindow=="window2") document.links[i].onclick = "";
document.links[i].target = where;
}}
}}
function initnobulinks(){
if (document.linkform.targetblank.checked)
nobulinks(true)
}
window.onload=initnobulinks
// -->
</script>
▼チェックボックス部分のソース
<FORM name="linkform" style="margin:5 0 0 0;"><INPUT
TYPE="checkbox" NAME="targetblank" ONCLICK="nobulinks(this.checked)"
checked> <b>チェックするとリンクが新しい窓で開きます</b></FORM>
関連タグ ： Javaスクリプト,
［
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スクリプト,
［
2006/04/09(日) ］
JavaScriptのwriteメソッドを使って、ブラウザ上に文字列を書き出す（表示する）事ができます。
writeメソッドは、HTMLタグを書き出すこともできます。
■JavaScript、document.writeの記述例
<script type="text/javascript">
<!--
document.open();
document.write("JavaScriptのdocument.writeでHTMLを書き出す方法
document.write("この部分にテキストの内容を記入<br>");<br>");
document.write("writeメソッドは、HTMLタグを書き出すこともできます。<br>");
document.write("<img src='file/hp_01.gif'><br>");
document.close();
// -->
</script>
■表示例
※JavaScriptのdocument.write文でキーワード比率の調整をする
writeメソッドは、HTMLタグを書き出すこともできます。
■JavaScript、document.writeの記述例
<script type="text/javascript">
<!--
document.open();
document.write("JavaScriptのdocument.writeでHTMLを書き出す方法
document.write("この部分にテキストの内容を記入<br>");<br>");
document.write("writeメソッドは、HTMLタグを書き出すこともできます。<br>");
document.write("<img src='file/hp_01.gif'><br>");
document.close();
// -->
</script>
■表示例
※JavaScriptのdocument.write文でキーワード比率の調整をする
［
2006/04/06(木) ］
ページをクリックすると、指定したページにジャンプするようにします。
ページ上でマウスボタンを押した時、背景をオレンジ色に変化するよう設定してあります。
▼ <BODY> 〜 </BODY> 内に、以下のソースを記入して下さい。
style="cursor:hand" onmousedown="document.bgColor='#ff8040'"
onclick="document.location='ジャンプさせるURL'"
● ページをクリックすると、指定したページにジャンプする サンプルページ
ページ上でマウスボタンを押した時、背景をオレンジ色に変化するよう設定してあります。
▼ <BODY> 〜 </BODY> 内に、以下のソースを記入して下さい。
style="cursor:hand" onmousedown="document.bgColor='#ff8040'"
onclick="document.location='ジャンプさせるURL'"
● ページをクリックすると、指定したページにジャンプする サンプルページ
≫[ページ全体をリンクにする]の続きを読む
関連タグ ： Javaスクリプト,
［
2006/04/06(木) ］
● 指定日までの日数を表示する Javascript のサンプルです。
▼ <HEAD> 〜 </HEAD> 内に記入するスクリプト
<script type="text/javascript"><!--
function myCountDown(myYear,myMonth,myDay){
myNow = new Date();
myRunDate = new Date( myYear , myMonth-1 , myDay );
myMsec = myNow.getTime()-myRunDate.getTime();
myDayCount = Math.floor(myMsec / (1000*60*60*24));
return myDayCount; // 指定日も１日と数える場合は１を足します(myDayCount+1)
}
// -->
</script>
▼ <BODY> 〜 </BODY> 内に記入するスクリプト
<script type="text/javascript"><!--
myDay = myCountDown(2007,8,15);
if (myDay < 0)document.write("指定日設定の2007/8/15まで、あと「",myDay*(-1),"日」です！");
else if (myDay == 0)document.write("本日は指定日設定の2007/8/15です！");
else document.write("指定日設定の2007/8/15から、",myDay,"日が経過しました");
// -->
</script>
≫[指定日までの日数を表示するJavascript]の続きを読む
関連タグ ： Javaスクリプト,
