javascriptのカラーピッカーを導入してみた
名言サイトに「Flash名言」というブログパーツがあるのですけれども、それの本文と背景の色を変更するのにjavascriptで動作する「colorpicker」というカラーピッカーを導入してみたのです。
それまではカラーコードを指定してselect文で選択するようにしていたのですが、このカラーピッカーは導入も簡単で動作もいい感じ。
ただ、記述をミスしたというかjavascript自体がよくわかってないので「サイトに接続できませんでした」というエラーが生じて困った。
導入
- 上記サイトから一式ダウンロード&FTPでアップロード
- 各ファイルへのパスをhead部分に記述
- 色変更用のタグを記述(id付与)
- 色情報記述用のjavascriptを記述
まず1はそのまま。
2は「colorPicker.css」「prototype.js」「scriptaculous.js」「yahoo.color.js」「colorPicker.js」への参照パスをhead部分に記述。
3は<input type=”text” name=”color” id=”colorfield1″ value=”FFFFFF”>みたいな感じで記述。
4は
<script type=”text/javascript”>
// <![CDATA[
["1", "2", "3", "4"].each(function(idx) {
new Control.ColorPicker(”colorfield” + idx, { IMAGE_BASE : “img/” });
});
// ]]>
</script>
みたいな感じで記述。
4を3の記述より後に書かないと動作しなかった。
javascriptでformに対して操作を行う場合はformブロックよりも後ろに記述しないといけないという決まりがあるとかないとか。
なので</body>と</html>の間にでも書いておけば間違いはなさそう。
3で作ったidとここで参照するidが合わないとエラーが起きるので注意。
また、アップロードの仕方によってはIMAGE_BASE : “img/”のimgに対する参照パスも変更しないといけないので注意。
ダウンロードしたままの構成をアップロードすれば問題はないですけれども。
最近のコメント