WebScripter.jp » JavaScript http://webscripter.jp HTML、CSS、Javascript、ActionScript、php、デザインなどWeb制作に関する備忘録 Sat, 16 Jan 2010 02:11:19 +0000 http://wordpress.org/?v=2.8.5 ja hourly 1 記事毎にCSSやJavascriptを追加できるWordpressプラグイン。add-css-js http://webscripter.jp/cms/post265/ http://webscripter.jp/cms/post265/#comments Sat, 16 Jan 2010 02:11:19 +0000 huevo@ws http://webscripter.jp/?p=265 このサイトはソースを記載することが多く、開設当初から記事毎にCSSやJAvascriptをあててサンプルを表示することができたらな、と考えていました。そこで見つけたのが、add-css-jsというプラグイン。

CssやJavaScriptをヘッダに追加するプラグイン(WordPress)：とりさんのソフト屋さん

ここからダウンロードして、wp-content/pluginsに入れるだけ。使い方も簡単で、投稿ページでカスタムフィールドに記述すれば、ヘッダにCSSやJavascriptが追加されます。

add-css-jsの使用方法

使い勝手も良いので、これからはこのサイトで活躍しそうなプラグインです。

]]> http://webscripter.jp/cms/post265/feed/ 1 クリッカブルマップでのロールオーバー http://webscripter.jp/html_css/post234/ http://webscripter.jp/html_css/post234/#comments Fri, 15 Jan 2010 17:20:55 +0000 huevo@ws http://webscripter.jp/?p=234 クリッカブルマップでロールオーバーで画像を入れ替える方法をメモ。javascriptを使って画像を入れ替えます。

◆サンプル
test

イメージタグに、例えば「map」というidをふり、getElementByIdでセットしたidの画像を指定したイメージに置き換える。

PLAIN TEXT
JavaScript:
  1. function changeMapImage(imgPath) {
  2.   document.getElementById('map').src = imgPath;
  3. }

HTMLは以下の通り。

PLAIN TEXT
HTML:
  1. <img usemap="#Map" id="map" src="btn.gif" border="0" alt="test" width="200" height="200" />
  2. <map id="map" name="map">
  3. <area onmouseover="changeMapImage('btn-on.gif')" onmouseout="changeMapImage('btn.gif')" shape="circle" coords="101,100,70" href="#" />
  4. </map>

]]> http://webscripter.jp/html_css/post234/feed/ 0 Flashと代替コンテンツをswfobject.jsで切り替え http://webscripter.jp/flash_as/post74/ http://webscripter.jp/flash_as/post74/#comments Tue, 18 Aug 2009 08:02:36 +0000 huevo@ws http://webscripter.jp/?p=74 仕事でFlashの代替画像を入れる必要があったので、Flashのパブリッシュ時に書き出されるAC_RunActiveContent.jsで出来るのか試してみましたが…
javaScriptオン、FlashPlayerオフ、もしくは使用できない状態では代替画像を表示する事は無理なようで、他に代わるものは無いかと調べてみたら、swfobject.jsといういいものがありました。しかも設置はとても簡単です。

ダウンロード先：swfobject - Project Hosting on Googole Code

設置方法は２通りあります。

1）オブジェクトタグを使って静的に埋め込む
2）javascriptを使って動的に埋め込む

1）の方法だと、IEでアクティブコントロールの許諾要求がでるようなので、2）の方法で記述してみます。

<head>〜</head>タグ内に以下のコードを記述

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="swfobject.js"></script>

swfもしくは代替コンテンツを表示したい場所に以下のように記述

PLAIN TEXT
HTML:
  1. <!-- swfの表示 -->
  2. <script type="text/javascript">
  3. swfobject.embedSWF(
  4. "hoge.swf", //swfファイルへのパス
  5. "noFlash",//代替コンテンツを表示するオブジェクトのid
  6. "720",//表示されるswfの幅
  7. "520",//表示されるswfの高さ
  8. "9.0.0"//flashPlayerのバージョン
  9. );
  10. </script>
  11.  
  12. <!-- 代替コンテンツの表示 -->
  13. <div id="noFlash">
  14. <img src="hoge.jpg" width="720" height="520" alt="代替画像">
  15. </div>

swfobject.embedSWFの引数に代替コンテンツを表示するオブジェクトのidを指定するだけで代替コンテンツが表示されるようになっています。とても便利。
代替コンテンツの表示部分にはもちろん画像だけでなく、いろいろと要素も入れられます。
このスクリプトの良い所は、JavaScriptオフ、FlashPlayerオン、またはその逆、またはどちらもオフの場合でも代替コンテンツが表示される事です。
これからかなりお世話になりそうなアイテムです。

このサイトに詳しい事が載っています。

»SWFObject v2.0 ドキュメント日本語訳

今までSWFが見られない人のために代替コンテンツを埋め込む事など、あまり意識していなかったのでWebデザイナーとして恥ずかしい限りなのだが、現在のユーザの端末は、PCだけでなく、携帯へも広がっていてPCの様にリッチなFlashコンテンツを読込めないものもあり、今後は意識していかなければならないことでしょうね。

]]> http://webscripter.jp/flash_as/post74/feed/ 0 PHP、Javascriptで動的に表組を生成する。おまけでActionscriptの方法も。 http://webscripter.jp/script_all/post22/ http://webscripter.jp/script_all/post22/#comments Tue, 11 Aug 2009 03:51:26 +0000 huevo@ws http://webscripter.jp/?p=22 javascriptやphpで時々動的にHTMLのテーブルを生成する事があるのだが、いつも忘れてしまうのでここいらでちゃんとまとめておこうと思う。おまけでActionScriptの場合の方法も。

PHPの場合

PLAIN TEXT
PHP:
  1. <?php
  2. /* 表示用サンプルデータ */
  3. $itemArray = array(
  4.   'apple',
  5.   'orange',
  6.   'peach',
  7.   'pear',
  8.   'grape',
  9.   'pineapple'
  10. );
  11.  
  12. /*== 変数の設定 ================*/
  13.  
  14. /* アイテムの総数 */
  15. $itemNum = count($itemArray);
  16. /* 1行あたりの列の数 */
  17. $cols = 5;
  18. /*行数を割り出し */
  19. $rows = ceil($itemNum/$cols);
  20. /* 変数 $html の初期化 */
  21. $html = "";
  22.  
  23. /*==== 表組の生成 ================*/
  24.  
  25. $html .= "<table border=\"1\">\n";
  26. for($i = 0; $i <$rows; $i++){
  27. 　/* 行が追加されるたびに列の数 $colsを足す */
  28.   $sequence = $i*$cols;
  29.   $html .= "<tr>;\n";
  30.   for($t = 0; $t <$cols; $t++){
  31.     if(($sequence+$t) <= $itemNum-1) {
  32.       /* $itemNumの範囲内であれば$itemArrayの内容を返す */
  33.       $html .= "<td>".$itemArray[$sequence+$t]."</td>\n";
  34.     }else{
  35.       /* $itemNumの範囲外であれば空白文字を返す */
  36.       $html .= "<td>&nbsp;</td>\n";
  37.     }
  38.   }
  39.   $html .= "</tr>\n";
  40. }
  41. $html .= "</table>\n";
  42.  
  43. /* 出力 */
  44. print $html;
  45. ?>

出力結果サンプル

JavaScriptの場合

PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript">
  2. //表示用サンプルデータ
  3. var itemArray = new Array(
  4.   'apple',
  5.   'orange',
  6.   'peach',
  7.   'pear',
  8.   'grape',
  9.   'pineapple'
  10. );
  11.  
  12. //==== 変数の設定 ================
  13.  
  14. //アイテムの総数
  15. var itemNum = itemArray.length;
  16. //1行あたりの列の数
  17. var cols = 5;
  18. //行数を割り出し
  19. var rows = Math.ceil(itemNum/cols);
  20. //変数 $html の初期化
  21. var html = "";
  22.  
  23. //==== 表組の生成 ================
  24.  
  25. html += "<table border=\"1\">\n";
  26. for(var i = 0; i <rows; i++){
  27.   // 行が追加されるたびに列の数 $colsを足す
  28.   var sequence = i*cols;
  29.   html += "<tr>\n";
  30.   for(t = 0; t <cols; t++){
  31.     //$itemNumの範囲内であれば$itemArrayの内容を返す
  32.     if((sequence+t) <= itemNum-1) {
  33.       html += "<td>"+itemArray[sequence+t]+"</td>\n";
  34.     }else{
  35.       //$itemNumの範囲外であれば空白文字を返す
  36.       html += "<td>&nbsp;</td>\n";
  37.     }
  38.   }
  39.   html += "</tr>\n";
  40. }
  41. html += "</table>\n";
  42.  
  43. //出力
  44. document.write(html);
  45. </script>

出力結果サンプル

PHP、JavaScriptとも言語による命令の記述が違うだけで、流れはほとんど変わりませんね。

おまけーActionScriptの場合

あらかじめ mc1という正方形のムービークリップシンボルを作成しておきます。記述がAS2.0ですが…_(..)_
ムービークリップ base はなくてもいいとは思います。

PLAIN TEXT
ACTIONSCRIPT:
  1. //配置される空のムービークリップ base を配置
  2. var base = _root.createEmptyMovieClip("base", 0);
  3.  
  4. //==== 変数の設定 ================
  5. //アイテムの総数
  6. itemNum = 13;
  7. //1行あたりの列の数
  8. var cols = 5;
  9. //行数を割り出し
  10. var rows = Math.ceil(num/cols);
  11. //配置するムービークリップの幅、高さ
  12. mcW = 90;
  13. mcH = 90;
  14.  
  15. //==== ムービークリップの配置 ================
  16. for(var i = 0; i <rows; i++) {
  17.   var sequence = i*cols;
  18.   for (var t = 0; t <cols; t++){
  19.     var mcNum = "mc" +(sequence+t);
  20.     var mcX = (mcW+5)*t;
  21.     var mcY = (mcH+5)*i;
  22.     _root.base.attachMovie("mc1",mcNum, (sequence+t),{_x:mcX, _y:mcY});
  23.     if((sequence+t)>= itemNum-1) {
  24.       break;
  25.     }
  26.   }
  27. }
  28. //ムービークリップ base をステージの中央に配置
  29. base._x = 0;
  30. base._y = (Stage.height/2) - (base._height/2);

]]> http://webscripter.jp/script_all/post22/feed/ 0