OKANOWEB WEB PARTS SAMPLE

触ると画像マスクがズームアウトする

<html>
<head>
<title>
</title>
<scriptlanguage="JavaScript"type="text/javascript">
<!--
//上に重ねるwelcomeの画像
welcome=newImage();welcome.src="./welcome.gif"
/*//////////////////////画像サイズ変更用関数//////////////
UseFree
====================================================================
Winn4n6moze4e5e6,Macn4n6moze4.5e5,Linuxn4n6moz
====================================================================
setIMGSIZE('画像id名',幅,高さ,'N4用レイヤー名')
Support=http://www.fureai.or.jp/~tato/JS/BOOK/INDEX.HTM
==================================================================
*/functionsetIMGSIZE(imgName,width,height,layNameForN4)
{if(width<0)width=0if(height<0)height=0if(document.all)
{//IE4IE5IE6用
document.all(imgName).style.width=widthdocument.all(imgName)
.style.height=height}elseif(document.getElementById)
{//N6Moz用
document.getElementById(imgName)
.setAttribute('width',width)
document.getElementById(imgName)
.setAttribute('height',height)}elseif(document.layers){
//N4用
with(document.layers[layNameForN4])
{varimgtag="<imgname="+imgName+"src="+welcome.src+"\n"+"width="+width+"height="+height+">
\n"if(width<=0||height<=0)imgtag=""document.open()document.write(imgtag)
document.close()}}}functionzoomIMG(idName,imgName,startW,startH,endW,endH,step,dly)
{w=startWh=startHoffw=parseInt((endW-startW)/step)offh=parseInt((endH-startH)/step)
d=0for(i=0;i<=step;i++){w+=offwh+=offhd+=dlysetTimeout(
"setIMGSIZE('"+imgName+"',"+w+","+h+",'"+idName+"')",d)
setTimeout("moveByLAYER('"+idName+"',-offw/2,-offh/2)",d)}}
functionmoveByLAYER(idName,offsetx,offsety)
{if(document.getElementById){varoj=document.getElementById(idName)
.styleoj.left=(parseInt(oj.left)+offsetx)+'px'oj.top=
(parseInt(oj.top)+offsety)+'px'}elseif(document.all)
{document.all(idName).style.pixelLeft+=offsetxdocument.all(idName)
.style.pixelTop+=offsety}elseif(document.layers)
document.layers[idName].moveBy(offsetx,offsety)}
//-->
</script>
</head>
<bodybgcolor="#ffffff">
触ると...<divid="test"style="position:absolute;top:50px;left:50px">
<imgid="tipstricks"src="./tipstricks.gif">
</div>
<!--↓N4対応の為に必ずIMGをレイヤーブロックで囲む-->
<divid="test0"style="position:absolute;top:50px;left:50px">
<ahref=#onmouseover="zoomIMG('test0','img0',500,100,0,0,20,30)">
<imgid="img0"border=0src="./welcome.gif"width="500"height="100">
</a>
</div>
</body>
</html>

|→ゲーム画像に触って小犬が出たら当り|

<html>
<head>
<title>
</title>
<scriptlanguage="JavaScript"type="text/javascript">
<!--
//小犬の画像atari=newImage();atari.src="./char.gif"hatena=newImage();hatena.src="./hatena.gif"
/*//////////////////////画像サイズ変更用関数//////////////
UseFree
====================================================================
Winn4n6moze4e5e6,Macn4n6moze4.5e5,Linuxn4n6mo
z====================================================================
setIMGSIZE('画像id名',幅,高さ,'N4用レイヤー名')
Support=http://www.fureai.or.jp/~tato/JS/BOOK/INDEX.HTM
==================================================================
*/functionsetIMGSIZE(imgName,width,height,layNameForN4)
{if(width<0)width=0if(height<0)height=0if(document.all){
//IE4用
document.all(imgName).style.width=widthdocument.all(imgName)
.style.height=height}elseif(document.getElementById){
//N6IE5IE6Moz用document.getElementById(imgName)
.setAttribute('width',width)document.getElementById(imgName)
.setAttribute('height',height)}elseif(document.layers){
//N4用with(document.layers[layNameForN4]){
varimgtag="<imgid="+imgName+"name="+imgName+"src="+hatena.src+"\n"+"width="+width+"height=
"+height+">
\n"if(width<=0||height<=0)imgtag=""document.open()document.write(imgtag)
document.close()}}}functionsetAtari(num){if(document.all)
document.images['char'+num].src=atari.srcelseif(document.getElementById)
document.images['char'+num].setAttribute('src',atari.src)elseif(document.layers)
document.layers['cd'+num].document.images['char'+num]
.src=atari.src}functionzoomIMG(idName,imgName,startW,startH,endW,endH,step,dly)
{w=startWh=startHoffw=parseInt((endW-startW)/step)offh=parseInt((endH-startH)/step)
d=0for(i=0;i<=step;i++){w+=offwh+=offhd+=dlysetTimeout(
"setIMGSIZE('"+imgName+"',"+w+","+h+",'"+idName+"')",d)}}//-->
</script>
</head>
<bodybgcolor="#ffffff"onload="num=Math.floor(Math.random()*3);setTimeout('setAtari(num)',500)">
?を1枚だけこすってみてください。小犬が出たらあたりです。
<!--////////////////////0////////////////////-->
<divid="cd0"style="position:absolute;left:50px;top:50px">
<imgname="char0"src="./suka.gif">
</div>
<!--↓N4対応の為に必ずIMGをレイヤーブロックで囲む-->
<divid="test0"style="position:absolute;left:50px;top:50px">
<ahref=#onmouseover="zoomIMG('test0','img0',100,119,0,0,20,30)">
<imgname="img0"border=0src="./hatena.gif"width="100"height="119">
</a>
</div>
<!--////////////////////1////////////////////-->
<divid="cd1"style="position:absolute;left:200px;top:50px">
<imgname="char1"src="./suka.gif">
</div>
<!--↓N4対応の為に必ずIMGをレイヤーブロックで囲む-->
<divid="test1"style="position:absolute;left:200px;top:50px">
<ahref=#onmouseover="zoomIMG('test1','img1',100,119,0,0,20,30)">
<imgname="img1"border=0src="./hatena.gif"width="100"height="119">
</a>
</div>
<!--////////////////////2////////////////////-->
<divid="cd2"style="position:absolute;left:350px;top:50px">
<imgname="char2"src="./suka.gif">
</div>
<!--↓N4対応の為に必ずIMGをレイヤーブロックで囲む-->
<divid="test2"style="position:absolute;left:350px;top:50px">
<ahref=#onmouseover="zoomIMG('test2','img2',100,119,0,0,20,30)">
<imgname="img2"border=0src="./hatena.gif"width="100"height="119">
</a>
</div>
</body>
</html>