牌画URL入力支援ツール「手牌つく郎」サンプルページ

jQueryを利用してプログラミングした牌画URL入力支援のサンプルページです。面倒な牌画URLの入力を軽減できます。麻雀ブログやサイト制作にご利用ください。ソースはブラウザの「ソースを表示」でご確認ください。

ブログ内記事・・・麻雀ブログ!勝負は下駄を履くまで

牌画の設定

  1. テキストボックスに牌画を置いているURLを入力
  2. 牌または「チー」「ポン」などの文字をクリック
  3. URLを選択してプログなどに貼り付ける
←牌画が置いてあるディレクトリのURLを入力。最後は「/」で終わる。
一萬 二萬 三萬 四萬 五萬 赤五萬 六萬 七萬 八萬 九萬
一筒 二筒 三筒 四筒 五筒 赤五筒 六筒 七筒 八筒 九筒
一索 二索 三索 四索 五索 赤五索 六索 七索 八索 九索
白 發 中 東 南 西 北 裏

横一萬 横二萬 横三萬 横四萬 横五萬 横赤五萬 横六萬 横七萬 横八萬 横九萬
横一筒 横二筒 横三筒 横四筒 横五筒 横赤五筒 横六筒 横七筒 横八筒 横九筒
横一索 横二索 横三索 横四索 横五索 横赤五索 横六索 横七索 横八索 横九索
白 發 中 東 南 西 北 裏

チーポンカン待ちロンツモドラ裏ドラ槓ドラ

○手牌を表示


○牌画のURLを表示



プログラムコード

jQueryの追加

HTMLのhead内にjQueryを呼び出すコードを追加する。これを忘れると動きません^^;


<script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>

JavaScriptコード

たったのこれだけです。


$(document).ready(function() {

	//牌画を配置する関数
	$("img","#haiga").click(function() {
		//クリックされた牌の属性値を取得する処理
		var haisrc = $(this).attr("src"); //牌画の場所を取得
		var hainame = $(this).attr("name"); //牌画の名前を取得
		var haialt = $(this).attr("alt"); //牌画のAlt属性の内容を取得
		var haihaba = $(this).attr("width"); //牌画の幅を取得
		var haitakasa = $(this).attr("height"); //牌画の高さを取得

		//テキストボックスから牌画のURLを取得する処理
		var haiiti = $(".haipath").val(); //牌画のディレクトリのURLを取得

		//牌画のファイル形式を設定する(拡張子を入力)
		var filetype = "gif"; //牌画のファイル形式を設定する

		//牌画を配置する処理
		var a = $("<img>").attr("src",haisrc);
		$(".tehai").append(a); //tehaiクラスの要素内に追加

		//牌画のURLを配置する処理
		var b = "<img src=\"" + haiiti + hainame + "." + filetype + "\" alt=\"" + haialt + "\" width=\"" + haihaba + "\" height=\"" + haitakasa + "\">";
		$(".url").append(b); //urlクラスの要素内に追加
	});

	//テキストを配置する関数
	$("a","#haiga").click(function() {
		var titletxt = $(this).attr("title"); //タイトル文字を取得
		$(".tehai").append(titletxt);
		$(".url").append(titletxt);
	});

	//URLを選択する関数
		$(".urlbtn").click(function(){
		$(".url").select();
		return false;
	});

	//リセット関数
		$(".resetbtn").click(function(){
		$(".tehai").empty();
		$(".url").empty();
	  return false;
	});

});

牌画について

本サンプルページでは、まつセンの牌画(24×34ピクセル)を使用しています。いつもたいへんお世話になっているサイトです。

注意事項

このページはJavaScriptでプログラミングされています。本コンテンツを利用する場合は、ご使用のブラウザをJavaScriptが利用できる状態に設定しておいてください。