2017年新春 ブログでJavaScriptのおみくじをひこう

あけましておめでとうございます。昨年始めたこのブログですが、読者登録やブログで紹介、またスターやコメントで交流していただき、とても励みになりました。ありがとうございました。今年もマイペースで記事を書いてまいります。どうぞよろしくお願いします。

JavaScriptでおみくじ

さてお正月にちなんで、おみくじをご用意しました。「おみくじをひく」画像をクリック！

JavaScriptでおみくじソースコード

イヌでもわかるJavaScript講座 - おみくじ その2スクリプトはこちらの記事を参考に作りました。
使用したイラスト素材はいらすとやさんです。今年もお世話になります。
JavaScriptソースコード:記事（ はてな記法モードかMarlDownモードのみ ）に貼り付けます。

<!-- omikuji by syofuso -->
<form><input type="button" value="" class="omikuji_btn" onClick="omikuji()"></form>
<script type="text/javascript">
myImage = new Array(
"https://cdn-ak.f.st-hatena.com/images/fotolife/s/syofuso/20161231/20161231022827.png?1483118950",
"https://cdn-ak.f.st-hatena.com/images/fotolife/s/syofuso/20161231/20161231022828.png?1483118972",
"https://cdn-ak.f.st-hatena.com/images/fotolife/s/syofuso/20161231/20161231022829.png?1483118999",
"https://cdn-ak.f.st-hatena.com/images/fotolife/s/syofuso/20161231/20161231022830.png?1483119035",
"https://cdn-ak.f.st-hatena.com/images/fotolife/s/syofuso/20161231/20161231022831.png?1483119052"
);
function omikuji(){
     myRnd = Math.floor( Math.random() * myImage.length );
     document.kuji.src = myImage[myRnd];
}
</script>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/syofuso/20161231/20161231034018.png?1483123225" border="0" name="kuji">

デザインCSS

/* omikuji by syofuso */
.omikuji_btn{
    border: 0px;
    width:250px;
    height:100px;
    background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/syofuso/20161231/20161231002744.png?1483111706) left top no-repeat;
}
.omikuji_btn:hover{
    cursor: pointer;
}

マウスオーバーで揺れるhover effectはHover.cssを利用しています。
この画像とコードはご自由にお使い下さい。
見たままモードでは貼りつけがうまくいかないので、はてな記法モード、MarkDownモードで試してみてください。
（どうもはてなブログの見たままモードではonClickが記述できないようなので）

今年も楽しくブログデザイン＆サイト制作の記事を書きたいと思います。どうぞ本年もよろしくお願いします。
皆様にとって2017年が幸多い年となることを祈ります。