おねぎ───────(^∀^)───────!!
先日のアレを見事に活用してくださいました。
すてき！じぷこちゃんすてき！！
紫じぷこちゃんに罵られたい！！(^∀^三^∀^)
何かもう想像以上にスライダーさんがいい仕事しまくるので
作ったわたくしとしては大変嬉しい限りです。
みんなもやってみてね！！(^∀^三^∀^)
さて、調子に乗ったわたくしめは今日のところは
うちでかなり前から実装している◆機能を簡単に追加できるように
書き直して配布してみようかと思います。(ﾟωﾟ)
↓まずはデモページ。
コマンドデモ
うちではおなじみの◆マークが付いていないですが、
これはもう各自自由にやっていただきたいと思いまして、
単純に指定の画像がコマンド入力によって切り替わるものということにしました。
というか単に自動で案内用の◆マークを入れたかっただけでやってたので、
機能的に別に◆が必ず必要とかそういうんじゃないですからね…！
ということで、今このサイトに実装しているのとは実は大分中身が違うといえば違いますが、
デモページを見る限り機能的にはまったく同じです。
↓スクリプトのダウンロードはこちらから。
■サンプルダウンロード
では実際にこれを使う場合について解説します。
①ダウンロードしたもののうち、「js」フォルダ内の「kc.js」を自サイトにアップロードする。
スクリプトはこのファイル1個だけでどうにかなると思います。
他にも色々とJavascriptを使っている場合、もしかすると競合して動作しない恐れもあります。
一応気を使った書き方をしてはいますが、もし動かなかったらスミマセン…。
②サイトのヘッダー部分で、アップロードしたjsファイルを読み込む
①でアップしたjsファイルを読み込んでください。
なお、文字コードはUTF-8なので、サイト・ブログの方が別の文字コードの場合は必ずcharset指定してください。
具体的なコードはこうなります。とりあえずこれで大丈夫かと思います。
<script type="text/javascript" src="./js/kc.js" charset="UTF-8"></script>
実際にHTMLに加えるとこんな感じになりそうです。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr" lang="ja">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>PrivateMoon</title>
<script type="text/javascript" src="(ここは実際にアップロードした時のパス)kc.js" charset="UTF-8"></script>
</head>
③画像と差分画像を用意する。
画像と差分画像をアップロードします。この時注意して欲しいのが、
差分画像と元画像のファイル名は同じで、アップロード先を変える必要があることです。
元画像のアップされているフォルダに「r」というフォルダを作り、差分画像はそこにアップロードします。
具体的な構成例については、サンプルのimageフォルダをよく見てみてください。
なお、元画像と差分画像の相対的な位置さえ合っていれば、画像の位置はどこでも問題ありません。
④imgタグで元画像を貼り付ける
普通に画像を貼るように、imgタグで元画像をページに貼り付けてください。
ただし、この時2点注意があります。
- imgタグには必ず「kc-image」というクラスを付ける
- 元画像と差分画像にサイズの差がある場合、imgタグのサイズ指定（width、height）は指定しない。
具体的なコードは以下のようになります。
<img src="image/imageA.jpg" class="kc-image">
class=”kc-image” が付いている画像のみ、差し替えの対象になります。
このとき、imageA.jpgの差分画像の方が、image/r/ 以下にない場合、画像はリンク切れします。
以上で準備完了です。
デフォルトではうちのサイトでも実装している例のコマンドで発動します。
思う存分発動するといいです。(ﾟωﾟ)
おまけ
kc.jsファイルをメモ帳などで開くと、下記の内容について編集できます。
- コマンドパターン
- 確認ダイヤログの文章
- 差分画像のフォルダ名（デフォルトでr）
■コマンドパターン編集
コマンドパターンについては、キーコードを調べる必要がありますが、
変更することが出来ます。たとえば、
var COMMAND_PATTERN = new Array(38,39,40,37);
このように編集すると、コマンドは「↑→↓←」に変わります。
■確認ダイヤログの文章編集
確認ダイヤログは、コマンド成功時に出てくるダイヤログのことです。
その時の文章が自由に変更できます。
■差分画像のフォルダ名編集
また、差分画像用のフォルダ名も変更できます。
※解説でrフォルダを作成としていたところです。
この仕組みが公開されていると、コマンド入力せずとも元画像のURLから
差分画像のフォルダも明らかです。ちょっとでもわかりにくしたい場合は変更してください。
※なお、どうしても直アクセスで見られたくない！と言う場合は.htaccessなどで対応した方がよいと思います。
ということで。
あまりいらっしゃらないかもしれませんが、ご自分のサイトとかブログとかで
コマンド式隠し画像を実装したい！という方はどうぞご自由に活用してくださいまし。(･ω･)ﾉ