|
[好きなカラーボールを押してください]
M02のおみくじを画像版にして、クリッカブルマップで派手にしています。マーブルチョコの様な画像とは何の関連もないインパクトだけが勝負の^^;;スクリプトですが、ホームページは何といっても第一印象が生命線ですからちょっと改造して表紙に使うと強烈かもしれません^^;;。一度ひいてしまうとおみくじが確定して、その後何度ひいても同じになりますが、リロードすれば初期化されるのでもう一度ひけます。
応用:出て来る画像をおみくじじゃなくて普通の写真などにしてクリッカブルマップに連動して違う写真を表示するといった写真セレクターも同じ構造で作れます。Mac版NN2.0とUNIX版3.0までのバージョンのbgColorにはバグがありますバグ回避はこちら。
|
|
[好きなカラーボールを押してください]
<html>
<head>
<title></title>
</head>
<script language="JavaScript">
<!--
//bgColor書き換え処理
function taku44(){ document.bgColor='yellow' }
function taku43(){ document.bgColor='#ffffff'}
function taku42(){ document.bgColor='#000000' }
function taku41(){ document.bgColor='red' }
function taku34(){ document.bgColor='red' }
function taku33(){ document.bgColor='#000000'}
function taku32(){ document.bgColor='#ffffff'}
function taku31(){ document.bgColor='yellow' }
function taku24(){ document.bgColor='yellow' }
function taku23(){ document.bgColor='red' }
function taku22(){ document.bgColor='#000000'}
function taku21(){ document.bgColor='#ffffff'}
function taku14(){ document.bgColor='#000000'}
function taku13(){ document.bgColor='#ffffff'}
function taku12(){ document.bgColor='red' }
function taku11(){ document.bgColor='yellow' }
function takuModoshi(){
if(navigator.appVersion.charAt(0)>=3) document.bgColor='#C9C25F'
}
//ここからおみくじ
Dly = 0
imgN = 1
rnds = 0
msg=""
if (navigator.appVersion.charAt(0)>=3) rnds=Math.random()
rnds=(""+rnds).charAt(2)
if (navigator.appVersion.charAt(0)>=3){
TAKUimg = new Image()
if(rnds=="0"){
TAKUimg.src = "TAKU5.GIF"
} else {
TAKUimg.src = "TAKU"+rnds+".GIF"
}
}
//NS2.0おみくじ用ランダム
if(navigator.appVersion.charAt(0)==2){
d=new Date();rnds=(""+d.getSeconds()).charAt(0)
}
function takuomi1() {
if(document.images)
document.omi.src = TAKUimg.src
if(rnds=="1"){ alert("超吉 : ちょ〜すごいよっ＼(^。^)／") }
if(rnds=="2"){ alert("大吉 : すごいっ、今日はごきげんだっ(^^)/") }
if(rnds=="3"){ alert("中吉 : いいことがあるよん(^_^)") }
if(rnds=="4"||rnds=="8"){alert(" 小吉 : 幸せになれるよ〜(^-^)")}
if(rnds=="0"||rnds=="5"||rnds=="7"||rnds=="9"){alert("吉 : 今日も良い日だ(^^)")}
if(rnds=="6"){ alert("凶 : 後は良くなる一方だよっ(^^；")}
}
//-->
</script>
</body>
<form>
<input type="radio"
onClick="window.location.href='SIMPLM05.HTM?'+new Date().getTime()">
(^^)/敗者復活リロードボタン
</form>
<center>
<hr>
<table border="10" aline="top">
<tr>
<td align="center">
<img name="omi" src="TAKU0.GIF" width="120">
</td>
</tr>
</table>
<p>
<font size=1>[好きなカラーボールを押してください]</font>
<p>
<img src="COLORB.GIF" border="0" usemap="#takumap" >
<map name="takumap">
<area
name="takuArea44"
coords="25,175 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku44()
>
<area
name="takuArea43"
coords="75,175 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku43()
>
<area
name="takuArea42"
coords="125,175 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku42()
>
<area
name="takuArea41"
coords="175,175 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku41()
>
<area
name="takuArea34"
coords="175,125 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku34()
>
<area
name="takuArea33"
coords="125,125 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku33()
>
<area
name="takuArea32"
coords="75,125 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku32()
>
<area
name="takuArea31"
coords="25,125 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku31()
>
<area
name="takuArea24"
coords="25,75 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku24()
>
<area
name="takuArea23"
coords="75,75 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku23()
>
<area
name="takuArea22"
coords="125,75 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku22()
>
<area
name="takuArea21"
coords="175,75 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku21()
>
<area
name="takuArea14"
coords="175,25 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku14()
>
<area
name="takuArea13"
coords="125,25 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku13()
>
<area
name="takuArea12"
coords="75,25 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku12()
>
<area
name="takuArea11"
coords="25,25 17"
href="javascript:takuomi1();takuModoshi()"
shape="circle"
onMouseOver=taku11()
>
</map>
</center>
</body>
</html>
使用した画像 :
TAKU1.GIF
TAKU2.GIF
TAKU3.GIF
TAKU4.GIF
TAKU5.GIF
TAKU6.GIF
TAKU7.GIF
TAKU8.GIF
TAKU9.GIF
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)