Entries
この記事が気に入ったらポチっと→
VMLエレメントのパラメータをJavaScriptによって動的に変更することを用いて、図形に動的に変化を付けることは単純に可能です。
全てのVMLエレメントにはID属性によってIDを指定できます。
JS内では、このIDはHTMLで単純に扱われるようなIDと同様に使用できます。
●基本的な参照
例えば、
<V:LINE ID="line1" FROM="0,0" TO="50,50" />
に対して
document.all.line1
が、オブジェクトになります。
そして単純に、
ev=document.all.line1.to;
や、
document.all.line1.from="20,20";
というように図形の属性値を参照することができます。
但し、.allが抜けると参照できないのでご注意ください。
また、ページ上のn番目のV:LINEオブジェクトを
document.all.tags("line")(n)
と参照できるように、ページ上のn番目V:xxxオブジェクトを
document.all.tags("xxx")(n)
として参照できます。
●動的変化の例
例１
関数MoveLineを定義する。
<SCRIPT LANGUAGE="javascript">
<!--
p_ex=0; //終点のy成分
a=1; //増加量
function MoveLine(){
if(p_ex>=100)a=-1; //y成分が100以上ならば増加量aを-1にする
else if(p_ex<=0)a=1; //y成分が0以下ならば増加量aを1にする
p_ex+=a;
document.all.line1.to="100,"+p_ex; //to属性に直接代入
}
//-->
</SCRIPT>
クリックによってsetInterval("MoveLine()",10)として実行されるようにボタン作る。
<INPUT TYPE="button" ONCLICK="setInterval('MoveLine()',10)" VALUE="実行">
IDがline1となるV:LINEを作る。(DIV[w100,h100]によって囲われる)
<DIV STYLE="position:relative;width:100px;height:100px;"><V:LINE ID="line1" FROM="0,0" TO="100,0" /></DIV>
以上は、ボタンをクリックすると、V:LINE(line1)の終点が(100,100)に達したら(100,0)になるまでyの成分を減少させ、(100,0)に達したら(100,0)になるまでyの成分を増加させる、という動作を繰り返すものです。
例２
関数MoveNeedleを定義する。
<SCRIPT LANGUAGE="JavaScript">
<!--
an=0;
function MoveNeedle(){
an+=Math.PI/180; //角度を1度増やす
p_ex2=Math.floor(Math.cos(an)*50)+50; //コサインによってxを算出
p_ey2=Math.floor(Math.sin(an)*50)+50; //サインによってyを算出
document.all.shape1.path="ar 0,0 100,100 50,0 50,0 e m 50,50 l "+p_ex2+","+p_ey2+" e"; //パスに直接代入
}
//-->
</SCRIPT>
クリックによってsetInterval("MoveNeedle()",10)を実行するボタンを作る。
<INPUT TYPE="button" ONCLICK="setInterval('MoveNeedle()',10)" VALUE="実行">
IDがshape1となるV:SHAPEを作る。
<V:SHAPE ID="shape1" STYLE="position:relative;width:100px;height:100px;" COORDORIGON="0,0" COORDSIZE="100,100" PATH="ar 0,0 100,100 50,0 50,0 e m 50,50 l 100,50 e" />
↑は、簡単に言えば時計の型です。
例３
関数DrawCurve()を定義します。
<SCRIPT LANGUAGE="JavaScript">
<!--
function DrawCurve(){
LineCnt=(new Number(document.all.linecnt.value))+1;
if(LineCnt<=1)return false;
Path="m 0,0 l 20,160 40,0 e ";
for(I=1;I<LineCnt;I++){
SX=Math.floor((I/LineCnt)*20);
SY=Math.floor((I/LineCnt)*160);
EX=SX+1;
EY=Math.floor(((LineCnt-I)/LineCnt)*160);
Path+="m "+SX+","+SY+" l "+EX+","+EY+" e ";
}
document.all.shape2.path=Path;
}
//-->
</SCRIPT>
IDがlinecntとなるテキストボックスと、ONCLICKがDrawCurve()を実行するボタンを作る。
<INPUT ID="linecnt" TYPE="text" VALUE="10"><INPUT TYPE="button" VALUE="描画" ONCLICK="DrawCurve()">
IDがshape2となるV:SHAPEを作る。
<V:SHAPE ID="shape2" STYLE="position:relative;width:40px;height:160px;" COORDORIGIN="0,0" COORDSIZE="40,160" PATH="m 0,0 l 20,160 40,0 e" />
これは、始点(0,0)、制御点(20,160)、終点(40,0)となる２次ベジェ曲線が丁度点(20,80)を頂点とする下に凸となる放物線に等しくなることを利用して、直線の描画の有限回連続によってそれを描画するものです。
全てのVMLエレメントにはID属性によってIDを指定できます。
JS内では、このIDはHTMLで単純に扱われるようなIDと同様に使用できます。
●基本的な参照
例えば、
<V:LINE ID="line1" FROM="0,0" TO="50,50" />
に対して
document.all.line1
が、オブジェクトになります。
そして単純に、
ev=document.all.line1.to;
や、
document.all.line1.from="20,20";
というように図形の属性値を参照することができます。
但し、.allが抜けると参照できないのでご注意ください。
また、ページ上のn番目のV:LINEオブジェクトを
document.all.tags("line")(n)
と参照できるように、ページ上のn番目V:xxxオブジェクトを
document.all.tags("xxx")(n)
として参照できます。
●動的変化の例
例１
関数MoveLineを定義する。
<SCRIPT LANGUAGE="javascript">
<!--
p_ex=0; //終点のy成分
a=1; //増加量
function MoveLine(){
if(p_ex>=100)a=-1; //y成分が100以上ならば増加量aを-1にする
else if(p_ex<=0)a=1; //y成分が0以下ならば増加量aを1にする
p_ex+=a;
document.all.line1.to="100,"+p_ex; //to属性に直接代入
}
//-->
</SCRIPT>
クリックによってsetInterval("MoveLine()",10)として実行されるようにボタン作る。
<INPUT TYPE="button" ONCLICK="setInterval('MoveLine()',10)" VALUE="実行">
IDがline1となるV:LINEを作る。(DIV[w100,h100]によって囲われる)
<DIV STYLE="position:relative;width:100px;height:100px;"><V:LINE ID="line1" FROM="0,0" TO="100,0" /></DIV>
以上は、ボタンをクリックすると、V:LINE(line1)の終点が(100,100)に達したら(100,0)になるまでyの成分を減少させ、(100,0)に達したら(100,0)になるまでyの成分を増加させる、という動作を繰り返すものです。
例２
関数MoveNeedleを定義する。
<SCRIPT LANGUAGE="JavaScript">
<!--
an=0;
function MoveNeedle(){
an+=Math.PI/180; //角度を1度増やす
p_ex2=Math.floor(Math.cos(an)*50)+50; //コサインによってxを算出
p_ey2=Math.floor(Math.sin(an)*50)+50; //サインによってyを算出
document.all.shape1.path="ar 0,0 100,100 50,0 50,0 e m 50,50 l "+p_ex2+","+p_ey2+" e"; //パスに直接代入
}
//-->
</SCRIPT>
クリックによってsetInterval("MoveNeedle()",10)を実行するボタンを作る。
<INPUT TYPE="button" ONCLICK="setInterval('MoveNeedle()',10)" VALUE="実行">
IDがshape1となるV:SHAPEを作る。
<V:SHAPE ID="shape1" STYLE="position:relative;width:100px;height:100px;" COORDORIGON="0,0" COORDSIZE="100,100" PATH="ar 0,0 100,100 50,0 50,0 e m 50,50 l 100,50 e" />
↑は、簡単に言えば時計の型です。
例３
関数DrawCurve()を定義します。
<SCRIPT LANGUAGE="JavaScript">
<!--
function DrawCurve(){
LineCnt=(new Number(document.all.linecnt.value))+1;
if(LineCnt<=1)return false;
Path="m 0,0 l 20,160 40,0 e ";
for(I=1;I<LineCnt;I++){
SX=Math.floor((I/LineCnt)*20);
SY=Math.floor((I/LineCnt)*160);
EX=SX+1;
EY=Math.floor(((LineCnt-I)/LineCnt)*160);
Path+="m "+SX+","+SY+" l "+EX+","+EY+" e ";
}
document.all.shape2.path=Path;
}
//-->
</SCRIPT>
IDがlinecntとなるテキストボックスと、ONCLICKがDrawCurve()を実行するボタンを作る。
<INPUT ID="linecnt" TYPE="text" VALUE="10"><INPUT TYPE="button" VALUE="描画" ONCLICK="DrawCurve()">
IDがshape2となるV:SHAPEを作る。
<V:SHAPE ID="shape2" STYLE="position:relative;width:40px;height:160px;" COORDORIGIN="0,0" COORDSIZE="40,160" PATH="m 0,0 l 20,160 40,0 e" />
これは、始点(0,0)、制御点(20,160)、終点(40,0)となる２次ベジェ曲線が丁度点(20,80)を頂点とする下に凸となる放物線に等しくなることを利用して、直線の描画の有限回連続によってそれを描画するものです。
この記事が気に入ったらポチっと→
Prev【VML】Pt.3 定義済みの図形3 image
最初にも、定義済みの図形はすべてshapeで描画できると書きました。ここではshapeによる図形の描画方法を解説します。
VMLによる一般的な図形は全て、点から点へという概念が重要になります。shapeは点から点へ、どのように線を引くか、または塗りつぶすかどうかなど、全てを指定します。したがってそのパラメータは複雑になります。
例えば、簡単な折れ線
<V:SHAPE STYLE="width:100px;height:100px;" COORDSIZE="100,100" COORDORIGIN="0,0" PATH="m 0,30 l 20,10 20,40 40,20 40,50 60,30 60,60 80,40 80,70 100,50 100,80 e" />
COORDSIZE、COORDORIGINはとりあえず、width,height、0,0を指定。これらはまた後に。
重要なのはPATH属性で、
m 0,30 l 20,10 20,40 40,20 40,50 60,30 60,60 80,40 80,70 100,50 100,80 e
という複雑な属性値になっています。
解りやすく、2Dベクトルのxとyはコンマ、2Dベクトル同士はスペースで分けていますが、実際コンマとスペースはいずれをとっても問題ありません。
mやl、eなどのアルファベットは、コマンドといいます。
つまり、2Dベクトルはパラメータなので、コマンドとパラメータによって成り立っています。一つのコマンドにおけるパラメータはコマンドの後に指定します。
「m 0,30」 ←点(0,30)を現在点として、サブパスを開始する。
m とは、点へ動く[moveto]の頭文字です。動くだけですから、動くまでの軌跡が描画されるということはありません。動く一点を1つのパラメータで指定します。VMLではサブパスを開始すると言います。
「l 20,10 〜 100,80」←点(20,10)、…、点(100,80)を順に追って直線を描画する。(折れ線を描画する。)
l とは、点までの直線を描画する[lineto]の頭文字です。これはmと違い、軌跡が描画されます。パラメータは１つ以上あってもよく、パラメータを順に追って折れ線を作ることも出来ます。
「e」←現在のサブパスを終了する。
e とは、サブパスを終了する[end]の頭文字です。mによって開始されたサブパスを終了します。パラメータはありません。
曲線を使う
<V:SHAPE STYLE="width:100px;height:100px;" COORDSIZE="100,100" COORDORIGIN="0,0" PATH="m 0,0 c 0,60 20,60 40,40 at 50,0 90,60 50,30 70,0 x" />
この図形は、直線、３次ベジェ曲線、弧の３つでできています。
m 0,0で点(0,0)を現在点にサブパスを開始。
「c 0,60 20,60 40,40」←現在点から終了点(40,40)まで2つの制御点(0,60)、(20,60)を使ったベジェ曲線を描画する。
c とは、曲線[curve]の頭文字です。パラメータの最後の点を終了点として、最初から最後の一つ前までのパラメータを順に制御点とします。
「at 50,0 90,60 50,30 70,0」←左上(50,0)右下(90,60)になる長方形を境界とする楕円の弧を、半径ベクトル(50,30)で定義される開始角から反時計回りに、半径ベクトル(70,0)で定義される角まで描画する。
at とは、弧を描く[arcto]の頭二文字です。楕円の境界となる長方形の左上、右下、開始半径ベクトル、終了半径ベクトルを順にパラメータとして指定します。半径ベクトルで定義される角とは、楕円の中心から(x,y)へ線を引いたときの楕円との交点よって定まる角度のことです。角度を意識するより交点を意識したほうがいいと思います。現在点から弧の始点までは自動的に直線が描画されます。また、時計回りに描画するときは、waコマンド[clockwisearcto]を同様なパラメータで使用します。
「x」←現在点からサブパスの開始点まで直線を描画し、サブパスを終了する。
x は閉じる[close]を意味します。これによってサブパスは囲われた図形になります。
（他にもありますが長くなるので次に）
最初にも、定義済みの図形はすべてshapeで描画できると書きました。ここではshapeによる図形の描画方法を解説します。
VMLによる一般的な図形は全て、点から点へという概念が重要になります。shapeは点から点へ、どのように線を引くか、または塗りつぶすかどうかなど、全てを指定します。したがってそのパラメータは複雑になります。
例えば、簡単な折れ線
<V:SHAPE STYLE="width:100px;height:100px;" COORDSIZE="100,100" COORDORIGIN="0,0" PATH="m 0,30 l 20,10 20,40 40,20 40,50 60,30 60,60 80,40 80,70 100,50 100,80 e" />
COORDSIZE、COORDORIGINはとりあえず、width,height、0,0を指定。これらはまた後に。
重要なのはPATH属性で、
m 0,30 l 20,10 20,40 40,20 40,50 60,30 60,60 80,40 80,70 100,50 100,80 e
という複雑な属性値になっています。
解りやすく、2Dベクトルのxとyはコンマ、2Dベクトル同士はスペースで分けていますが、実際コンマとスペースはいずれをとっても問題ありません。
mやl、eなどのアルファベットは、コマンドといいます。
つまり、2Dベクトルはパラメータなので、コマンドとパラメータによって成り立っています。一つのコマンドにおけるパラメータはコマンドの後に指定します。
「m 0,30」 ←点(0,30)を現在点として、サブパスを開始する。
m とは、点へ動く[moveto]の頭文字です。動くだけですから、動くまでの軌跡が描画されるということはありません。動く一点を1つのパラメータで指定します。VMLではサブパスを開始すると言います。
「l 20,10 〜 100,80」←点(20,10)、…、点(100,80)を順に追って直線を描画する。(折れ線を描画する。)
l とは、点までの直線を描画する[lineto]の頭文字です。これはmと違い、軌跡が描画されます。パラメータは１つ以上あってもよく、パラメータを順に追って折れ線を作ることも出来ます。
「e」←現在のサブパスを終了する。
e とは、サブパスを終了する[end]の頭文字です。mによって開始されたサブパスを終了します。パラメータはありません。
曲線を使う
<V:SHAPE STYLE="width:100px;height:100px;" COORDSIZE="100,100" COORDORIGIN="0,0" PATH="m 0,0 c 0,60 20,60 40,40 at 50,0 90,60 50,30 70,0 x" />
この図形は、直線、３次ベジェ曲線、弧の３つでできています。
m 0,0で点(0,0)を現在点にサブパスを開始。
「c 0,60 20,60 40,40」←現在点から終了点(40,40)まで2つの制御点(0,60)、(20,60)を使ったベジェ曲線を描画する。
c とは、曲線[curve]の頭文字です。パラメータの最後の点を終了点として、最初から最後の一つ前までのパラメータを順に制御点とします。
「at 50,0 90,60 50,30 70,0」←左上(50,0)右下(90,60)になる長方形を境界とする楕円の弧を、半径ベクトル(50,30)で定義される開始角から反時計回りに、半径ベクトル(70,0)で定義される角まで描画する。
at とは、弧を描く[arcto]の頭二文字です。楕円の境界となる長方形の左上、右下、開始半径ベクトル、終了半径ベクトルを順にパラメータとして指定します。半径ベクトルで定義される角とは、楕円の中心から(x,y)へ線を引いたときの楕円との交点よって定まる角度のことです。角度を意識するより交点を意識したほうがいいと思います。現在点から弧の始点までは自動的に直線が描画されます。また、時計回りに描画するときは、waコマンド[clockwisearcto]を同様なパラメータで使用します。
「x」←現在点からサブパスの開始点まで直線を描画し、サブパスを終了する。
x は閉じる[close]を意味します。これによってサブパスは囲われた図形になります。
（他にもありますが長くなるので次に）
この記事が気に入ったらポチっと→
PHPではcryptという関数によって文字列を暗号化することができます。
※ この関数で暗号化された文字列は複合化する(元に戻す)ことはほぼできないので、復号を要するような用途には使えません。
何に利用するのかというと、認証に利用します。
簡単なパスワード認証機能はおそらくこれを利用しています。
文字列Aをcrypt関数で暗号化した文字列Bの間で次のことが言えます。
・AはBとは違う。
・BはAに戻すことはほぼ不可能。(注1)
認証を利用する場合を考えます。
例えば、掲示板では投稿に対してそれぞれの投稿に編集パスが与えられます。そのパスは名前などの情報と共にログファイルに保存されます。が、ログファイル自体は見つければ誰でも閲覧することが出来ます。そこに編集パスがそのままの状態であれば、これは当然ばれてしまいます。
こういうときに、編集パスを投稿に際してcryptで暗号化します。すると、もしログファイルを第三者に閲覧されても、暗号化されていてさらに複合化もほぼ不可能であるから、第三者には元の編集パスが分からないのです。唯一分かる投稿者が編集時に元の編集パスを送信して、それを暗号化したときにログファイルにある暗号と一致すれば、認証されたことになるのです。
ここではDES暗号を用います。(cryptの使い方でDESやMD5の2種類の暗号化が利用できます。)
string crypt ( string str, string [salt])
strは暗号化する文字列(8文字以上は同じになるので8文字まで。)
saltは暗号化するための2文字の文字列です。これはプログラム内に指定します。
saltによって返り値は変化します。また、返り値の最初の2文字にsaltが含まれ、その後の11文字が暗号化文字列になります。
ここで今、$_POST["pass"]にパスワードが格納されていて、それを保存する前とします。
$Salt="ab";
$Crypt=crypt($_POST["pass"],$Salt);
$Crypt=substr($Crypt,2); //返り値に含まれるsaltを取り除く(注2)
送信された編集パス$_POST["pass"]が暗号化されたパス$Cryptedと一致するかどうかを検証します。
$Salt="ab";
$Crypt=crypt($_POST["pass"],$Salt);
$Crypt=substr($Crypt,2);
if($Crypt==$Crypted)echo "認証しました。";
else echo "認証できません。";
プログラム自体は単純ですね。
注1…暗号化された文字列は、多くの台数のコンピュータを用意すれば解読することができるらしいです。まあそこまでして解読して掲示板の管理室に侵入するような荒らしはいませんでしょうけど･･･。
注2…Saltをつけた状態では、総当り(全ての文字列について探って見つけること)や予想当り(パスと予想される文字列について探って見つけること)に対して、ある文字列が本当のパスであるかを検証するのが少しながら容易になってしまいます。要するにsaltがあれば自分だけで検証できて、無ければ暗号を生成したプログラム自体を通す必要があるのです。
※ この関数で暗号化された文字列は複合化する(元に戻す)ことはほぼできないので、復号を要するような用途には使えません。
何に利用するのかというと、認証に利用します。
簡単なパスワード認証機能はおそらくこれを利用しています。
文字列Aをcrypt関数で暗号化した文字列Bの間で次のことが言えます。
・AはBとは違う。
・BはAに戻すことはほぼ不可能。(注1)
認証を利用する場合を考えます。
例えば、掲示板では投稿に対してそれぞれの投稿に編集パスが与えられます。そのパスは名前などの情報と共にログファイルに保存されます。が、ログファイル自体は見つければ誰でも閲覧することが出来ます。そこに編集パスがそのままの状態であれば、これは当然ばれてしまいます。
こういうときに、編集パスを投稿に際してcryptで暗号化します。すると、もしログファイルを第三者に閲覧されても、暗号化されていてさらに複合化もほぼ不可能であるから、第三者には元の編集パスが分からないのです。唯一分かる投稿者が編集時に元の編集パスを送信して、それを暗号化したときにログファイルにある暗号と一致すれば、認証されたことになるのです。
ここではDES暗号を用います。(cryptの使い方でDESやMD5の2種類の暗号化が利用できます。)
string crypt ( string str, string [salt])
strは暗号化する文字列(8文字以上は同じになるので8文字まで。)
saltは暗号化するための2文字の文字列です。これはプログラム内に指定します。
saltによって返り値は変化します。また、返り値の最初の2文字にsaltが含まれ、その後の11文字が暗号化文字列になります。
ここで今、$_POST["pass"]にパスワードが格納されていて、それを保存する前とします。
$Salt="ab";
$Crypt=crypt($_POST["pass"],$Salt);
$Crypt=substr($Crypt,2); //返り値に含まれるsaltを取り除く(注2)
送信された編集パス$_POST["pass"]が暗号化されたパス$Cryptedと一致するかどうかを検証します。
$Salt="ab";
$Crypt=crypt($_POST["pass"],$Salt);
$Crypt=substr($Crypt,2);
if($Crypt==$Crypted)echo "認証しました。";
else echo "認証できません。";
プログラム自体は単純ですね。
注1…暗号化された文字列は、多くの台数のコンピュータを用意すれば解読することができるらしいです。まあそこまでして解読して掲示板の管理室に侵入するような荒らしはいませんでしょうけど･･･。
注2…Saltをつけた状態では、総当り(全ての文字列について探って見つけること)や予想当り(パスと予想される文字列について探って見つけること)に対して、ある文字列が本当のパスであるかを検証するのが少しながら容易になってしまいます。要するにsaltがあれば自分だけで検証できて、無ければ暗号を生成したプログラム自体を通す必要があるのです。
この記事が気に入ったらポチっと→
これはあまり知られていない技
↓のような色を選択するダイアログを表示できます。
これはコンポーネントなので、次のOBJECTタグを貼り付ける必要があります。(こういうのはHEADに納めるのがいいと思います。)
<OBJECT ID="ccdlg" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" WIDTH="0" HEIGHT="0"></OBJECT>
↑を貼ると、chooseColorDlg関数が使えるようになります。この関数は、OBJECTに指定したIDに属します。(ccdlg.chooseColorDlg())
int chooseColorDlg(string initialColor)
initialColorはダイアログの選択色の初期値(0〜1677215、#rrggbb形式、blackなどの定義色名も可能)
返り値は選択された色の0〜16777215となる10進数値です。
返り値が複雑なので、toString(16)で16進数に置き換えます。
しかし#rrggbb形式にするには、6桁にしなければならないので、
"00000"を手前に連結させて、substringで右から6文字分を切り取ります。
ここではボタンを押すとダイアログが表示され、選択した色にボタンの文字色が変わるものを考えます。
SCRIPTタグ内にて、id.style.colorをダイアログで指定した色に変える関数changeTextColor(id)を定義します。
<SCRIPT LANGUAGE="JavaScript">
function changeTextColor(id){
var IniCol=id.style.color;
var NewCol=ccdlg.chooseColorDlg(IniCol);
NewCol=NewCol.toString(16);
NewCol="00000"+NewCol;
NewCol=NewCol.substring(NewCol.length-6,NewCol.length);
NewCol="#"+NewCol;
id.style.color=NewCol;
}
</SCRIPT>
自分自身(this)を引数に、changeTextColor(this)とした構文をONCLICKに指定したINPUTボタンを作ります。
<INPUT TYPE="button" VALUE="色選択ダイアログ" ONCLICK="changeTextColor(this)">
これで完成です。
SCRIPT部分もこれまたHEAD内に納めるべきでしょう。(OBJECTよりは後に。)
OBJECTはページが完全にロードされた後にロードされる(ような)ので、SCRIPT中でいきなり関数を呼び出しても動作しません(でした。経験談)
ONLOADで実行すると大丈夫な模様です。(経験談)
↓のような色を選択するダイアログを表示できます。
これはコンポーネントなので、次のOBJECTタグを貼り付ける必要があります。(こういうのはHEADに納めるのがいいと思います。)
<OBJECT ID="ccdlg" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" WIDTH="0" HEIGHT="0"></OBJECT>
↑を貼ると、chooseColorDlg関数が使えるようになります。この関数は、OBJECTに指定したIDに属します。(ccdlg.chooseColorDlg())
int chooseColorDlg(string initialColor)
initialColorはダイアログの選択色の初期値(0〜1677215、#rrggbb形式、blackなどの定義色名も可能)
返り値は選択された色の0〜16777215となる10進数値です。
返り値が複雑なので、toString(16)で16進数に置き換えます。
しかし#rrggbb形式にするには、6桁にしなければならないので、
"00000"を手前に連結させて、substringで右から6文字分を切り取ります。
ここではボタンを押すとダイアログが表示され、選択した色にボタンの文字色が変わるものを考えます。
SCRIPTタグ内にて、id.style.colorをダイアログで指定した色に変える関数changeTextColor(id)を定義します。
<SCRIPT LANGUAGE="JavaScript">
function changeTextColor(id){
var IniCol=id.style.color;
var NewCol=ccdlg.chooseColorDlg(IniCol);
NewCol=NewCol.toString(16);
NewCol="00000"+NewCol;
NewCol=NewCol.substring(NewCol.length-6,NewCol.length);
NewCol="#"+NewCol;
id.style.color=NewCol;
}
</SCRIPT>
自分自身(this)を引数に、changeTextColor(this)とした構文をONCLICKに指定したINPUTボタンを作ります。
<INPUT TYPE="button" VALUE="色選択ダイアログ" ONCLICK="changeTextColor(this)">
これで完成です。
SCRIPT部分もこれまたHEAD内に納めるべきでしょう。(OBJECTよりは後に。)
OBJECTはページが完全にロードされた後にロードされる(ような)ので、SCRIPT中でいきなり関数を呼び出しても動作しません(でした。経験談)
ONLOADで実行すると大丈夫な模様です。(経験談)
この記事が気に入ったらポチっと→
Prev【VML】Pt.2 定義済みの図形2 arc polyline curve
【image】
画像を表示します。
この画像表示では、IMGタグにはできない特有の属性があります。
ここでは、この132x176画像
を使用します。
▼これは単純な表示
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" />
▼刈り込み(部分表示)
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:99px;height:88px;" CROPLEFT="0.2" CROPRIGHT="0.05" CROPTOP="0.1" CROPBOTTOM="0.4" />
CROPLEFT,CROPRIGHT,CROPTOP,CROPBOTTOMは、それぞれ左、右、上、下からの刈り込み率(百分率(0~1))
width,heightの変更に注意。
▼コントラスト指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAIN="8" />
GAINはコントラスト値(-128~128)[範囲詳しくは不明]
1=通常
0=灰色
-1=ネガ ←W3Cノートには記述されていませんでしたがやってみたところできるようです。原理上のことなのかは知りませんが…。
▼明るさ指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BLACKLEVEL="0.3" />
BLACKLEVELは明るさの値(-1〜1)[範囲詳しくは不明](0.5、-0.5ぐらいでほぼ真っ白、真っ黒になります。)
▼ガンマ補正
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAMMA="3" />
GAMMAはガンマ値(0＜値≦1000ぐらい)[範囲詳しくは不明](1が通常で0に近づくほど白く、1より大きくすると黒くなる。)
▼グレイスケール
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GRAYSCALE="true" />
GRAYSCALEはtrueまたはfalseを指定。[trueが肯定、falseが否定。以後この2値を真偽値という。]
▼2色(黒白)化
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BILEVEL="true" />
BILEVELは真偽値を指定。
･･･と、imageには様々な属性がある。
恐らく使い道は少ないのでしょうけど。
尚、ここで登場している熱帯魚は実際に飼っているやつです(笑)
【image】
画像を表示します。
この画像表示では、IMGタグにはできない特有の属性があります。
ここでは、この132x176画像
を使用します。
▼これは単純な表示
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" />
▼刈り込み(部分表示)
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:99px;height:88px;" CROPLEFT="0.2" CROPRIGHT="0.05" CROPTOP="0.1" CROPBOTTOM="0.4" />
CROPLEFT,CROPRIGHT,CROPTOP,CROPBOTTOMは、それぞれ左、右、上、下からの刈り込み率(百分率(0~1))
width,heightの変更に注意。
▼コントラスト指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAIN="8" />
GAINはコントラスト値(-128~128)[範囲詳しくは不明]
1=通常
0=灰色
-1=ネガ ←W3Cノートには記述されていませんでしたがやってみたところできるようです。原理上のことなのかは知りませんが…。
▼明るさ指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BLACKLEVEL="0.3" />
BLACKLEVELは明るさの値(-1〜1)[範囲詳しくは不明](0.5、-0.5ぐらいでほぼ真っ白、真っ黒になります。)
▼ガンマ補正
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAMMA="3" />
GAMMAはガンマ値(0＜値≦1000ぐらい)[範囲詳しくは不明](1が通常で0に近づくほど白く、1より大きくすると黒くなる。)
▼グレイスケール
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GRAYSCALE="true" />
GRAYSCALEはtrueまたはfalseを指定。[trueが肯定、falseが否定。以後この2値を真偽値という。]
▼2色(黒白)化
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BILEVEL="true" />
BILEVELは真偽値を指定。
･･･と、imageには様々な属性がある。
恐らく使い道は少ないのでしょうけど。
尚、ここで登場している熱帯魚は実際に飼っているやつです(笑)
