はんこ、いりますか？

「超」お手軽　画像ロールオーバー

Filed under：日記, ネットショップ「綺麗印影」, 素人ウェブマスターの挑戦, javascript — 番頭 @ 17:37:36

マウスカーソルを合わせると画像が変わるロールオーバー

前回で左ナビゲーションのボタンの色を変更いたしました。

その時ついでに、マウスオーバーでナビゲーションボタンの色を変更するようにしました。

マウスオーバーで画像を変更させると言うのは色々な方法があるのですが、いずれも面倒なところがあり、厄介です。

今回、超手軽に出来る画像ロールオーバースクリプトを作成しましたので、ご紹介させていただきます。

■続きを読むにはこちら↓
別ウインドウで読むまたはこの下に表示する »

この画像ロールオーバースクリプトを使うには、ほんの少しだけ条件があります。

元の画像ファイル名が「xxx.jpg」である場合、ロールオーバー時の画像ファイル名は「xxx_hover.jpg」としなければなりません。
（ただし、「_hover」の部分は変更することができます）
元の画像と、ロールオーバー時の画像は、同じフォルダに入っていなければなりません。
元の画像と、ロールオーバー時の画像は、同じ拡張子でなければなりません。
javascriptを用いるので、javascriptがオフになっているブラウザでは効果が現れません。

制限はこの程度です。深く考えずにできると思います。

では、利用方法です。

まずは、以下のファイルをダウンロードしてください。
jscript_roll_over_image.js
クリックして表示されるプログラムをコピーしてtextファイルとして同じ名前で保存してもいいですし、リンクを右クリックして保存してもいいです。
ロールオーバー後の画像に挿入する文字列「_hover」を変更したい場合は、「jscript_roll_over_image.js」ファイルをテキストエディタで開き、1行目の
var insert_str = '_hover';
の「_hover」の部分を好きな文字列に変えて、保存してください。
「jscript_roll_over_image.js」を、皆さんのwebページ上の適当なところにアップロードしてください。
画像をロールオーバーさせたいhtmlファイルの<head>タグ内に、以下の内容を挿入してください。

<script type="text/javascript" src="jscript_roll_over_image.js"></script>

「jscript_roll_over_image.js」がhtmlファイルより1階層上にある場合は、

<script type="text/javascript" src="../jscript_roll_over_image.js"></script>

とするなどしてください。
ロールオーバーさせたい画像の<img>タグの中を、以下のようにしてください。

<img src="sample.jpg" alt="サンプル" onmouseover="roll_over_image(this,1)" onmouseout="roll_over_image(this,0)" />

画像の内容によって変更させる必要はありません。ただただ<img>タグ内に赤文字部分を呪文のように挿入していってください。
注意すべき点としては、<a>タグに挿入するのではなく、<img>タグに挿入すると言うことです。
<a>タグに挿入してもロールオーバーにはなりません。改良すればできるようになると思いますが、<a>タグがなくてもロールオーバーが出来ることが利点の一つなので、<img>タグに入れるようにしたほうがいいと思います。
あとは、ロールオーバー前の画像とロールオーバー後の画像をアップロードするだけです！

最後になりましたが、弊店Webページを見ていただいて、上記スクリプトのバグをご指摘いただいた「チャーガ茶屋」のかずさん。本当にありがとうございました。

追記（2007年4月25日 15:10）

1箇所バグがありましたので修正いたしました。上記時間までにスクリプトをダウンロードされた方は、必ず新しいスクリプトをダウンロードしなおしてご利用下さい。

« 文章を隠す

トラックバック URI : http://www.kirei-inei.net/weblog/2007/04/24/oaeueauyiyeyydh/trackback/

コメント (1)

「色」を変更

Filed under：日記, ネットショップ「綺麗印影」 — 番頭 @ 18:30:07

以前のページ　立石先生にご指摘いただきました先日、「うりうり教習所」卒業者で行う勉強会に参加いたしました。

講師はカラーコーディネーターの立石喜美子先生でした。

運良く立石先生に「綺麗印影」Webページをごらんいただき、アドバイスをいただけました。

結果は……

■続きを読むにはこちら↓
別ウインドウで読むまたはこの下に表示する »

トラックバック URI : http://www.kirei-inei.net/weblog/2007/04/23/ooen/trackback/

コメント (5)

進化したBTOショッピング

Filed under：日記, ネットショップ「綺麗印影」, 素人ウェブマスターの挑戦 — 番頭 @ 4:59:05

皆さんは「BTO」と言う言葉をご存知でしょうか？

IT用語辞典によると、『顧客から注文を受けてから生産する方式』となっております。

ということは、カスタマイズ商品であればBTOになりうると言うことになります。
当然印鑑もBTOと言うことになります。

話は変わりますが…
インターネットを通じて「パソコン」を購入しようとした時、他のショッピングとは違って、かなり特殊であることがわかります。

ショッピングカートと言うものはありませんし、数多くのオプションを選んで、それに応じて価格の変動がわかるようになっております。

これがいわゆる、「パソコン」をネットで購入する時のBTOシステムなのですが…

番頭が目指したショッピングシステムは、ズバリこれであったと言えます。

■続きを読むにはこちら↓
別ウインドウで読むまたはこの下に表示する »

ところで、そのネットBTOショッピングの代表であるパソコンと、弊店のショッピングシステムを比べてみて、弊店のシステムには致命的な欠陥があることがわかりました。

ネットでパソコンを購入された方ならわかると思いますが、パソコンのショッピングシステムには必ず画面のどこかに合計価格が見えるようになっており、オプションを一つ変更するごとに価格がどう変わったかすぐ確認できるようになっているのです。

弊店のシステムはオプションと連動して価格が変更するようにはしていたものの、常に画面に価格が表示されている仕様ではなかったため、上記画像(クリックでそのページへと移動します)のようにレイアウトを変更しました。

価格及び納期が表示される左カラムは固定されており、常に見えるようになっております。

これでオプションが変更しても価格がすぐにわかるので安心ですね。

昔は「左側だけ固定して右側だけスクロール」などといった手法には、「フレーム」と言う技法が使われていました。

しかし、今はそれを使うのはよくない(理由は良くわかってませんが…)と言うことで、他の手法(と言うよりスタイルシートを使った手法)を用いてみました。

参考にしたサイトはこちらです

「CSSで縦分割の擬似フレームページ」(WeMo)

なぜかセレクトメニューだけ上に表示されるバグ本当はリンク先にあるように、縦に分割したかったのですが、上記の方法で擬似フレーム化をすると、InternetExplorer６においてセレクトメニューだけなぜか隠れずに上に表示されるバグがあったため、セレクトメニューと重ならないように左部分に表示することにしました。

ちなみに、同時に化粧箱を選択可能にいたしました。

もちろん、化粧箱も選択内容によって写真が即座に変わる仕組みになっております。

オプションが色々選べて、価格がすぐにわかるだけでなく、今選んでいるオプションの写真までがすぐにわかる。

手前味噌ですが、弊店のショッピングシステムは、一歩進んだBTOネットショッピングといえるかもしれません。

« 文章を隠す

トラックバック URI : http://www.kirei-inei.net/weblog/2007/04/19/ebtoyycyayoyoy/trackback/

コメント (1)

｢大安吉日」をアナウンス

Filed under：日記 — 番頭 @ 19:30:08

カレンダーには休業日だけでなく、大安の日が表示されております

「綺麗印影」ショッピングサイトにはまだまだ特徴があります。

印鑑に縁起を担ぐことが多く、実店舗でも「大安の日にとりに行きます」と言うお客さんが良くおられます。

この業界において、大安がいつの日かすぐにわかるようにすることは、非常に重要なのです。

そこで、弊店では、営業日カレンダー、及び希望お届け日に大安の日をお知らせするシステムを取り入れております。

左はトップページ等、多くのページで表示するようにしているカレンダーです。

■続きを読むにはこちら↓
別ウインドウで読むまたはこの下に表示する »

トラックバック URI : http://www.kirei-inei.net/weblog/2007/04/12/zcacaueaeuoycyeyyoy/trackback/

コメント (0)

旧字が探せる。しかも、簡単

Filed under：日記, ネットショップ「綺麗印影」 — 番頭 @ 19:17:38

「綺麗印影」ショッピングシステムのもう一つの大きな特徴。

それは、パソコンで表示できない（表示の仕方がわかりにくい）特殊な漢字を、簡単に捜すことが出来るところにあります。

通常、旧字などの特殊漢字は、「MS-IMEの～～のボタンを押して…」など、旧字の変換方法を紹介したり、左の画像のように一覧表を設けて「A-1」のように指定してもらう方法が多いようです。

最初に述べた方法は登録されている特殊漢字に限られますし、非常に面倒です。
後で述べた方法は、パソコンに登録されていない漢字でも指定することは出来ますが、種類を増やすと表が大きくなりお客様が探すのに手間がかかってしまいます。

最も最良な方法は、指定した常用漢字に合わせて特殊文字の有無を自動的に検知して特殊文字リストを作成し、その後お客様が指定した漢字（特殊文字）を常用漢字とすりかえる方法だと言えます。

その方法を実現しましたので、ご紹介いたします。
サンプルページは前回と同じく、実印、黒水牛、13.5mmの購入ページ(ステップ1)です。

■続きを読むにはこちら↓
別ウインドウで読むまたはこの下に表示する »

トラックバック URI : http://www.kirei-inei.net/weblog/2007/04/09/uiuaueacea/trackback/

コメント (1)

ケースも一緒に購入　しかもわかりやすい

Filed under：日記, ネットショップ「綺麗印影」 — 番頭 @ 19:51:59

綺麗印影ショッピングシステムの最大の特徴は「ショッピングカートシステムを用いない」ということです。

ショッピングカートシステムを採用しなかった理由。それは本体とケースを同時に購入可能にすることで、1度で全ての買い物を完了する仕組みにしたかったからです。

左の画像、実印、黒水牛、13.5mmの購入ページ(ステップ1)を元に説明いたします。

■続きを読むにはこちら↓
別ウインドウで読むまたはこの下に表示する »

印鑑ケースと言うものは、購入した印鑑のサイズによって大きさや選べる色が変わってしまいます。

番頭は、印材のサイズが決まった時点で、その印鑑が入るケースを限定して、選択できるようにすることが最も自然であると考えました。

ただ、数多いケースを写真付きで羅列すると、ページの長さが非常に長くなってしまい、注文する人にとってややこしくなります。

逆に写真なしで選択肢を設けると、表示はスリムになりますが、お客様にとってどのようなケースかすぐに理解することが出来なくなります。

上記の矛盾を解決するため、弊店ではお客様が選択したケースの画像をリアルタイムで変化させ、表示するようにいたしました。

初期設定ではケースは「もみ皮ケース　黒」となっており、その写真が右に表示されております。

ここで、ケースの選択肢を「ブランドエース」に変更すると、右の画像が自動的にブランドエースの画像に変わります。

更に下の選択肢にある「色」を、別の色に変えると、該当するケースの色の画像に変化するのです。

もちろん、ブランドエースが選べない直径15mm以上の印鑑の場合、ブランドエースの選択肢は表示されません。逆に、直径12mm以下の場合、ヒットケースが選択可能となります。

コンパクトな画面サイズで、数多いバラエティの組み合わせの注文を、わかり易く行えるように。

番頭が目指したのはこれでした。

そして、それを目指すためには、既存のショッピングカートではなく、印鑑の、印鑑による、印鑑のためのショッピングシステム(=ショッピングカートシステムからの脱却)が必要であると判断したのです。

なお、ステップ1の部分にはもう一つ、大きな特徴があります。細かく調べてはないですが、おそらくその試みは印鑑業界初でしょう（違ってたら謝ります）。

それについては次回にご紹介いたします。

« 文章を隠す

トラックバック URI : http://www.kirei-inei.net/weblog/2007/04/06/yyaiieoaethaiea/trackback/

コメント (2)

システムリニューアル！

Filed under：日記, ネットショップ「綺麗印影」 — 番頭 @ 16:50:53

前回の投稿からまるまる2ヶ月

長いブランクとなりましたが、それも何とか終わりそうです。

苦労して作成した独自のショッピングシステムにようやく動作の目処がつきました。

本日、個人印単品のみですが、システムをリニューアルさせていただきました。

このショッピングシステムは、番頭がこだわりを持って作っており、ネットショップ印鑑店ではほとんど見られない(おそらく業界初？)ような仕組みがいくつも用意されています。

次回から、それらの仕組みをご紹介させていただきます。

トラックバック URI : http://www.kirei-inei.net/weblog/2007/04/05/36/trackback/

コメント (3)

2007/4/24 火曜日

「超」お手軽　画像ロールオーバー

2007/4/23 月曜日

「色」を変更

2007/4/19 木曜日

進化したBTOショッピング

2007/4/12 木曜日

｢大安吉日」をアナウンス

2007/4/9 月曜日

旧字が探せる。しかも、簡単

2007/4/6 金曜日

ケースも一緒に購入　しかもわかりやすい

2007/4/5 木曜日

システムリニューアル！

カレンダー

カテゴリー

うりうり教習所

アーカイブ

メタ情報

2007年 4月
日	月	火	水	木	金	土
« 2月				5月 »
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30