・ ・ ・ ・ ・ ・ ・ ・ ・ ・  →前へ→次へトップへ戻る
その6. ウソ・フォトショップ!(イベントの組合せ)
       ※見せ方いろいろ。

サンプル ※「色見本」で色を選んで、キャンバスに絵を描けます
※使い方・キャンパスに1回クリックすると、描画がONになります。
    ・その状態でマウスを動かすと、絵が描けます。
    ・もう一度クリックすると、描画がOFFになります。







…>きれいにする。


ソース(スクリプト側) <HEAD>〜</HEAD>の中に埋め込みます。

<SCRIPT>

/*初期設定部分*/
var i_color="draw_1";
var i_click=1;

/*パレット変更部分*/
function imgcolor(i_col) {
	i_color=i_col;
	document['color_sam'].src =i_color+".gif";
}

/*描画部分(クリックしたら)*/
function img_1(){
i_click=i_click+1;
}

/*描画部分(初期設定)*/
function img_0(){
i_click=0;
}

/*描画部分(偶数の時、描画する)*/
function imgcg(i_name) {
if(i_click%2==0){
	document[i_name].src =i_color+".gif";
}}

</SCRIPT>

	
・クリックするごとに「img_1」関数によって、「i_click」の数値が増えます。
・「i_click」が偶数の時にだけ、「imgcg」関数によって、描画されます。
・パレットは、「imgcolor()」関数で変えています。
  ※チェンジする画像を変えているだけです。
  ※色の数だけ、画像を用意しています。
ソース(画像の表示のところ)
キャンバス表示部分
<SCRIPT>
<!--
for (i=0; i< 400; i++)
{
k=i+1;
  document.write('<A href="javascript:window.focus()"
    onMouseover=imgcg("'+k+'")
    onmousedown=img_1()><IMG SRC="draw_0.gif" NAME="'+i+'"
    BORDER=0 width="10px"></A>');
  j=i+1
   if(j%20 == 0)
    {document.write('<BR>');
     }
}
//-->
</SCRIPT>

パレット表示部分
<IMG src="./color/color_01.gif" border="0"><BR>
<IMG src="./color/color_02.gif" border="0">
  <A href="javascript:imgcolor('./color/draw_11')">
    <IMG src="./color/color_11.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_12')">
    <IMG src="./color/color_12.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_13')">
    <IMG src="./color/color_13.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_14')">
    <IMG src="./color/color_14.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_15')">
    <IMG src="./color/color_15.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_16')">
    <IMG src="./color/color_16.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_17')">
    <IMG src="./color/color_17.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_18')">
    <IMG src="./color/color_18.gif" border="0"></A>
<IMG src="./color/color_03.gif" border="0"><BR>
<IMG src="./color/color_04.gif" border="0">
  <A href="javascript:imgcolor('./color/draw_21')">
    <IMG src="./color/color_21.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_22')">
    <IMG src="./color/color_22.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_23')">
    <IMG src="./color/color_23.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_24')">
    <IMG src="./color/color_24.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_25')">
    <IMG src="./color/color_25.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_26')">
    <IMG src="./color/color_26.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_27')">
    <IMG src="./color/color_27.gif" border="0"></A>
  <A href="javascript:imgcolor('./color/draw_28')">
    <IMG src="./color/color_28.gif" border="0"></A>
<IMG src="./color/color_05.gif" border="0"><BR>
<IMG src="./color/color_06.gif" border="0"><BR>

	
 ※画像を組み合わせて使うときは、ボーダーを消しておきましょう。

・・・・・・・・・・>もどる。