ブログ用おもしろ素材目次

(1)画像の自動切換え(ファイル名連番ケース)
■【FC2ブログでサンプル実行】　　■【BIGLOBEブログでサンプル実行】

●この素材は数枚の画像を、指定した周期で切り替えて表示します
●画像ファイルは同じフォルダに入れ、ファイル名の語尾は1・2・3・・・のように連番数字のこと
●画像サイズも同じにしてソース内で指定すること（本例は、WIDTH=90 HIGHT=100）

HTMLソース

JavaScript制御で画像が時間により変わるか確認<br>

<script type="text/javascript" src="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/jv5.js"></script>

JS ソース

var nob=1;
function tim(){	
	if(document.hana.complete){
	document.hana.src="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/sumire"+nob+".jpg";
        nob++;	
	if(nob > 5)nob=1;
	}
　　　　//　切替え時間は下記の2000を変更のこと
	setTimeout('tim()',2000);
}
document.write("<div align=\"center\">")
document.write("<img src=\"http://blog-imgs-12.fc2.com/k/u/i/kuiryo/sumire1.jpg\" 
NAME=\"hana\" WIDTH=90 HIGHT=100>") //段詰め（表示の関係で段落）

document.write("</div>")
	window.onload=tim;

(2)画像の自動切換え(ファイル名・場所指定方式)
■【FC2ブログでサンプル実行】　　■【BIGLOBEブログでサンプル実行】

●この素材は数枚の画像を、指定した周期で切り替えて表示します
●画像ファイル名は保存位置と共に配列へ代入します。表示は配列の若番から実行します
●したがってこちらは、保存場所とファイル名に特に制限はありません。
●画像サイズにも特に制限はないが、縦幅が揃っていないと画像以降の行が変化し文字が読めません。

HTMLソース

JavaScript制御で画像が時間により変わるか確認<br>
<script type="text/javascript" src="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/jv1.js"></script>

JS ソース

var myurl ="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/";
gazou = new Array();
gazou[0] = myurl + "tumago.jpg";
gazou[1] = myurl + "magome1.jpg";
gazou[2] = myurl + "kaida.jpg";
gazou[3] = myurl + "kakehasi.jpg";
gazou[4] = myurl + "nezame.jpg";

var nob=0;
function tim1(){
	document.myimg.src= gazou[nob];
        nob++;	
	if(nob > 4)nob=0;
　　　　//　切替え時間は下記の2500を変更のこと
	setTimeout('tim1()',2500);
}	
document.write("<div align=\"center\">")
document.write("<img src=\"http://blog-imgs-12.fc2.com/k/u/i/kuiryo/tumago.jpg\" NAME=\"myimg\" >")
document.write("</div>")
	window.onload=tim1;

(3)マウスに(画像)アイコンが1個付いてくる
■【FC2ブログでサンプル実行】　　■【BIGLOBEブログでサンプル実行】

●マウスにアイコンが1個ついてきます

HTMLソース

これはマウスにアイコンが1個付いて来るサンプルです

<LINK href="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/g3.css" rel=stylesheet>
<script type="text/javascript" src="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/g3.js"></script>

CSSLソース

span {FONT-SIZE:12pt; TOP:-100px; POSITION:absolute; }

JS ソース

// ******* 下記を変更の事（KIの実用JavaScript）*******	
// 画像ファイルとサイズの指定	
var gifdat = "<IMG src='http://blog-imgs-12.fc2.com/k/u/i/kuiryo/zuti.gif' width=23 height=25 border=0>"
var xa = 15      // 矢印からの文字の表示横位置
var ya = -15　　  // 矢印からの文字の表示縦位置  
// ***************************************************	
var haba = 0 	
var xiti=new Array()	
var yiti=new Array()	
var msg=new Array()	
    xiti [0] = -100	
    yiti [0] = -100	
	
var shoki = 0	
function mousmv(){	
	x = window.event.clientX + document.body.scrollLeft;
	yscr = document.documentElement.scrollTop + document.body.scrollTop;
	y = window.event.clientY + yscr;
    shoki = 1	
}	
	
function hyouzi() {
if (shoki==1 && document.all) {	
        xiti[1]=xiti[0]+haba	
        yiti[1]=yiti[0]	
	xiti [0] = x + xa
	yiti [0] = y + ya
	
    var hyouzi1 = eval("document.all.sno0" + ".style")	
    	hyouzi1.posLeft=xiti[1]
    	hyouzi1.posTop=yiti[1]
}	
if (shoki==1 && document.layers) {
        xiti[1]=xiti[0]+haba	
        yiti[1]=yiti[0]	
	
	xiti [0] = x + xa
	yiti [0] = y + ya
	
	var hyouzi1 = eval("document.sno0")
    	hyouzi1.left=xiti[1]
    	hyouzi1.top=yiti[1]
}	
	
var Timer = setTimeout("hyouzi()", 10)	
}	

// ----------------------------------------------------
    document.write ("<span id='sno0"  + "'>")	
    document.write(gifdat)	
    document.write ("</span>")	

if (document.layers){	
	document.captureEvents(Event.MOUSEMOVE);
}	
 document.onmousemove = mousmv;	
window.onload=hyouzi;

(4)マウスに(画像)アイコンが1個付いてくる
■【FC2ブログでサンプル実行】　　■【BIGLOBEブログでサンプル実行】

●マウスにアイコンが数個ついてきます
●数個の意味はマウスが動いた場合、前の位置から現在の位置へ移動するいイメージです

HTMLソース

これはマウスにアイコンが数個付いて来るサンプルです

<LINK href="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/g4.css" rel=stylesheet>
<script type="text/javascript" src="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/g4.js"></script>

CSSLソース

span {FONT-SIZE:12pt; TOP:-100px; POSITION:absolute; }

JS ソース

// ******* 下記を変更の事（KIの実用JavaScript）*******	
// 画像とサイズの指定	
var gifdat = "<IMG src='http://blog-imgs-12.fc2.com/k/u/i/kuiryo/zuti.gif' width=23 height=25 border=0>"
var shu=10   // 画像数 
var xa = 15      // 矢印からの文字の表示横位置
var ya = -15　　  // 矢印からの文字の表示縦位置  
// ***************************************************	
var haba = 0 	
var xiti=new Array()	
var yiti=new Array()	
var msg=new Array()	
for (i=0;i<shu;i++) {	
    xiti [i] = -100	
    yiti [i] = -100	
    msg [i] = gifdat	
}	
var shoki = 0	
	
function mousmv(){	
	x = window.event.clientX + document.body.scrollLeft;
	yscr = document.documentElement.scrollTop + document.body.scrollTop;
	y = window.event.clientY + yscr;
    shoki = 1	
}	
	
function hyouzi() {	
if (shoki==1 && document.all) {	
    for (i=shu; i>=1; i--) {	
        xiti[i]=xiti[i-1]+haba	
        yiti[i]=yiti[i-1]	
    }	
	
xiti [0] = x + xa
yiti [0] = y + ya

	
for (i=0; i<shu; i++) {	
    var hyouzi1 = eval("document.all.sno" + (i) + ".style")	
    	hyouzi1.posLeft=xiti[i]
    	hyouzi1.posTop=yiti[i]
    }	
}	
if (shoki==1 && document.layers) {	
    for (i=shu; i>=1; i--) {	
        xiti[i]=xiti[i-1]+haba	
        yiti[i]=yiti[i-1]	
    }	
	
xiti [0] = x + xa
yiti [0] = y + ya
	
for (i=0; i<shu; i++) {	
	var hyouzi1 = eval("document.sno"+i)
    	hyouzi1.left=xiti[i]
    	hyouzi1.top=yiti[i]
    }	
}	
	
var Timer = setTimeout("hyouzi()", 10)	
}	

for (i=0;i<=shu;i++) {	
    document.write ("<span id='sno" + i + "'>")	
    document.write(msg[i])	
    document.write ("</span>")	
}	
if (document.layers){	
	document.captureEvents(Event.MOUSEMOVE);
}	
	
 document.onmousemove = mousmv;	
window.onload=hyouzi;

(5)マウスオンで画像チェンジ
■【FC2ブログでサンプル実行】　　■【BIGLOBEブログでサンプル実行】

●このサンプルは画像の上にマウスが乗ると、別の画像を表示します。
●本例はFC2ブログではHTMLソース貼り付けのみで動きました。改行の扱い⇒「HTMLタグのみ」のこと。
●ただし、BIGLOBEブログの方は全ソースをJavaScriptで書いてJSファイルにしないとエラーになる。
　（エラー発生原因は、最初に名前付きで画像を表示するが、名前がJavaScript側では見えないようだ）

HTMLソース

<script type="text/javascript">
function md1()
{ document.images["nam1"].src="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/suko1.jpg"; } 
function md2() 
{ document.images["nam1"].src="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/suko2.jpg"; }
</Script>

<center>
下の写真にマウスを持って行くと画像が変わります。<br>
<A HREF="#" OnMouseOver="md1(1)" OnMouseOut="md2(1)">
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/suko2.jpg" NAME="nam1" BORDER=0>
</A><br>

入り口は狭いが中の仏像は大きい（ソコタイ　何とか神社にて）
</center>

※　BIGLOBEブログはJSファイルを作成して動かしましたがソース掲載は省略

(6)マウスオンで拡大表示
■【FC2ブログでサンプル実行】　　■ (BIGLOBEブログでサンプルは作成していません）

●このサンプルはテーブルの上側の小枠にマウスを乗せると、下側に拡大表示されます。
●FC2ブログで指定されているフォルダへ画像をダウンロードしその画像を使用した場合は実行できたが、
　別サイトのファイル使用した場合は画像が表示出来なかった？
●BIGLOBEブログではテーブル使用はソースを1行にする必要があり面倒なのでパス

HTMLソース

「マウスオンで拡大表示」ページを開いて、テーブルの上側の小枠にマウスを乗せると、
その小枠の花が下側に拡大表示されます。

<script type="text/javascript">
var matida="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da"
function md1(i) {document.images["nam2"].src=matida + i +".jpg";}
function md2() {document.images["nam2"].src=matida + 22 +".jpg";}
</Script>

<center>
<TABLE BORDER>
<TR><TD><A HREF="#"  OnMouseOver="md1(16)" OnMouseOut="md2()">
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da16.jpg" WIDTH=77 HEIGHT=60 BORDER=0></A></TD>

<TD><A HREF="#"  OnMouseOver="md1(15)" OnMouseOut="md2()">
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da15.jpg" WIDTH=77 HEIGHT=60 BORDER=0></A></TD>

<TD><A HREF="#"  OnMouseOver="md1(34)" OnMouseOut="md2()">
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da34.jpg" WIDTH=77 HEIGHT=60 BORDER=0></A></TD>

<TD><A HREF="#"  OnMouseOver="md1(36)" OnMouseOut="md2()">
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da36.jpg" WIDTH=77 HEIGHT=60 BORDER=0></A></TD>

<TD><A HREF="#"  OnMouseOver="md1(37)" OnMouseOut="md2()">
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da37.jpg" WIDTH=77 HEIGHT="60" BORDER=0></A>
</TD></TR>

<TR><TD COLSPAN=5>
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da22.jpg" NAME="nam2" WIDTH=410 EIGHT=300 BORDER=0>
</A></TD></TR></TABLE>
</center>

(7)マウスクリックで拡大表示
■【FC2ブログでサンプル実行】　　■ (BIGLOBEブログでサンプルは作成していません）

●このサンプルはテーブルの上側の小枠をクリックで、下側にその画像が拡大表示されます。
●BIGLOBEブログではテーブル使用はソースを1行にする必要があり面倒なのでパス

HTMLソース

「マウスクリックで拡大表示」ページを開いて、テーブルの上側の小枠にマウスリックで、
その小枠の花が下側に拡大表示されます。

<script type="text/javascript">
var matida="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da";
function md1(i) {document.images["nam2"].src=matida + i +".jpg";}
</Script>

<center>
<TABLE BORDER>
<TR><TD><A HREF="#" Onclick="md1(15)" >
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da15.jpg" WIDTH=77 HEIGHT=60 BORDER=0></A></TD>

<TD><A HREF="#" Onclick="md1(16)" >
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da16.jpg" WIDTH=77 HEIGHT=60 BORDER=0></A></TD>

<TD><A HREF="#" Onclick="md1(37)" >
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da37.jpg" WIDTH=77 HEIGHT=60 BORDER=0></A></TD>

<TD><A HREF="#" Onclick="md1(34)">
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da34.jpg" WIDTH=77 HEIGHT=60 BORDER=0></A></TD>

<TD><A HREF="#" Onclick="md1(36)">
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da36.jpg" WIDTH=77 HEIGHT=60 BORDER=0></A>
</TD></TR>

<TR><TD COLSPAN=5>
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/da15.jpg" NAME="nam2" WIDTH=410 HEIGHT=300 BORDER=0>
</TD></TR></TABLE>
</center>

(8)フィルター効果付き画像切替え
■【FC2ブログでサンプル実行】　　■ (BIGLOBEブログでサンプルは作成していません）

●画像切り替えにフィルター効果を使用したサンプルです
●多分IE5、IE6以外は動かないと思うが最近たのブラウザを持っていないので未確認
●下記ソースの「フィルター番号指定」で番号を指定できます。番号によりどのような効果があるかは、
フィイルター番号を参照して下さい。

HTMLソース

<script type="text/javascript">
var waipu=0 ; // ワイプ処理の指定
var watime=2 ; //変化する時間を指定
img = new Array

//********　以下に画像ファイル名を指定****************************　
("http://blog-imgs-12.fc2.com/k/u/i/kuiryo/nezame.jpg",
"http://blog-imgs-12.fc2.com/k/u/i/kuiryo/kakehasi.jpg",
"http://blog-imgs-12.fc2.com/k/u/i/kuiryo/tumago.jpg")
//****************************************************************

var gasu = img.length;  // 画像数
var img_no = new Array();　　　     //img_noを画像オブジェクト宣言　
for (i = 0; i < gasu; i++) {
  img_no[i] = new Image();
  img_no[i].src = img[i];
}
var gno = 1;
// ******** フィルター番号指定　**************
	waipu=6
//********************************************

function tim(){
	imgchg()
	setTimeout('tim()',3000);  //切り替え時間指定3000は3秒
}

function imgchg() {
    	document.images.myjpg.style.filter="reveaLTrans(duration=watime,transition=" + waipu +")";
    	document.images.myjpg.filters.reveaLTrans.Apply();
  	document.images.myjpg.src = img_no[gno].src; 
    	document.images.myjpg.filters.reveaLTrans.Play();

  	gno = gno + 1;
  	if (gno > (gasu - 1)) gno = 0;
}
</script>

<center>
<img src="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/nezame.jpg" name="myjpg">
<center>
<script type="text/javascript">
	window.onload=tim;
</script>

(9)マウスオンで拡大(CSS使用）
■【FC2ブログでサンプル実行】　　■ (BIGLOBEブログでサンプルは作成していません）

●画像の上にマウスを乗せた時、その画面の脇に拡大画像を表示します。
●但し少し問題があり、場所を相対位置(position:relative)で指定した場合、表示場所が確保され文章等は確保エリアの下からの表示となり大きな空白できてしまいます。
●場所を絶対位置(position:absolute)で指定の場合は空白は出来ないが、画像を位置は重ならないようにする為にファイル作成ごとに調整が必要。

HTMLソース

<script type="text/javascript">
function styovr() {
	document.all("mygozou").style.visibility="visible";
}
function styout() {
	document.all("mygozou").style.visibility="hidden";
}
</script>

タイ国の現地法人に出向している時、クメール遺跡を数箇所訪れましたが、<br>
パノムルン遺跡へ行った時その近くのスパタナラー寺院と言う小さなお寺に、<br>
笑うライオン
<a href="#" onMouseOver="styovr()" onMouseOut="styout()">
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/raion.jpg" WIDTH=60 HEIGHT=56 BORDER=0></a>

(マウスオンで拡大)があった。<br>
その時は少し面白いと思った程度だったが一応写真を撮っておいた。<br>
後でこの写真を見たら見るたびに頬がゆるんでしまう何ともユーモアに溢れた画像で、<br>
旅先の通りすがらに撮った写真では私の一番の傑作です。<br> 
<span ID="mygozou" STYLE="position:relative;; left:10; top:10; visibility:hidden">
<IMG SRC="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/raion.jpg" WIDTH=400 HEIGHT=376>
</span>

【戻る】