はんこ、いりますか？

元の画像ファイル名が「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)

進化した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：日記, ネットショップ「綺麗印影」, 素人ウェブマスターの挑戦 — 番頭 @ 16:51:11

「綺麗印影」Webショップ。オープンいたしました。

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

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

コメント (2)

自惚れは続かない

Filed under：日記, 素人ウェブマスターの挑戦 — 番頭 @ 18:07:41

「綺麗印影」Webページは、オープンソースのスクリプトなどを用いて番頭が作成したサイトです。
ネットショップ開始段階としてはかなりページ数が多く、また一部のスクリプトやデザインを自分で作成しました。

番頭はネットショップ塾「うりうり教習所」の22期生なのですが、同期の方から、「野田さんあれ全部自分で作ったの?　凄いね～」とよく言われます。

はっきり言って、番頭は天狗になっておりました。

先日、その天狗の鼻を見事にへし折られましたので、ご報告いたします。

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

トラックバック URI : http://www.kirei-inei.net/weblog/2007/01/20/uiiae/trackback/

コメント (0)

ページ内リンクをアニメーションで

Filed under：素人ウェブマスターの挑戦, javascript — 番頭 @ 18:08:20

先日ご報告したポップアップサブメニューを実装すべく、番頭は現在細かなところをリニューアルしております。

リニューアルのついでに、半年以上前に作成した原稿のブラッシュアップや、より使い勝手の良い操作の導入を考えているところです。
(そんなことばっかりやるから開店が遅れるんだと言う声が聞こえてきそうですが…)

そのうちの一つが、「ページ内リンクをアニメーション」で行うことです。
テストページをご覧下さい。

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

「ページ内リンク」で検索をかけるとわかると思いますが、ページ内リンクのアニメーションは単なる見栄以上の効果があります。

リンクをクリックすると別のページに移動すると言う固定観念がある中、ページ内リンクで一瞬のうちに同ページの別の場所に移動されると、閲覧者は多少なりとも混乱するのです。
アニメーションはその混乱を排除するために役に立ちます。

と言うことで、実装開始！　と言いたいところでしたが……　これも結構手間がかかりました。

まず番頭が見つけたのは、「このページの先頭へ、をちょこっとおしゃれに[スクリプトAとします]」(ブログ:SiMPLE*SiMPLE)
よくある「このページの先頭へ」というページ内リンクをクリックすると、するするっと先頭までアニメーションするjavascriptです。

ただ、番頭が欲しかったのは「先頭へ」と上に上がるアニメーションより、下に上がるアニメーションでした。

そこで、もう少し調べたところ見つけたのが、「ページ内リンク（ID）にするするっと移動する[スクリプトBとします]」(ブログ：web-conte.com)。
これで上にも下にもアニメーションできます

早速実装！　javascriptファイルをアップロードして HTMLのヘッダーで指定するだけ！　と思いきや……

番頭の環境(WindowsXP SP2 / Firefox1.5.0.9)では、リンク先のIDが画面下のほうにあるとき、延々と下にスクロールし続ける(スクロールバーで上に移動しようとしてもすぐ一番下まで下がる)と言う不具合が。
(リンクで指定した場所がウインドウの一番上に来るまでスクロールし続ける仕様なのではないかと思います)

さすがにスクリプトを延々眺めて改変を試みるのには無理があると思ったので、別のスクリプトを探しました。

で、見つけたのが、「[ajax] ページ内リンクでスムーススクロール[スクリプトCとします]」(ZEROBASE)
これだと上記のような「延々下にスクロール」と言う不具合はないようです。

しかし、このスクリプトCも少し気になるところが…

スクリプトAとは逆に、スクリプトCは下向きのアニメーションしかできないようです。そのため、「先頭に戻る」スクリプトにはスクリプトAを導入する必要があります。なおこの方法では一番下から中央あたりにアニメーションリンクすることが出来ません。
HTMLのヘッダーには「スクリプトAのjsファイル」→「スクリプトCのjsファイル(2ファイル)」の順に設定する必要があります。
逆にするとなぜか「先頭へ戻る」のアニメーションが働きません。
リンク先の場所は<a name="xxx"></a>で囲む必要があるようです。
最初僕は<hx id="xx"></hx>と指定していたので上手く動きませんでした。

紆余曲折で何とか実装できましたが、少し不満もあります。
もちろん、ど素人が無料で他人のスクリプトを拝借している以上、文句は言えない立場なのですが。

スクリプトBの不具合がなければなぁ……誰か有償で改変してくれないだろうか…
と、自分勝手なことを考えてしまった番頭でした。

« 文章を隠す

トラックバック URI : http://www.kirei-inei.net/weblog/2007/01/13/yuyaeayeyoyoycyeyayycyoc/trackback/

コメント (3)

日	月	火	水	木	金	土
« 6月
		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	31

2007/5/9 水曜日

「完全開店」です！！

2007/4/24 火曜日

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

2007/4/19 木曜日

進化したBTOショッピング

2007/2/5 月曜日

とりあえず…

2007/1/20 土曜日

自惚れは続かない

2007/1/13 土曜日

ページ内リンクをアニメーションで

カレンダー

カテゴリー

うりうり教習所

アーカイブ

メタ情報

はんこ、いりますか？

2007/5/9 水曜日

「完全開店」です！！

2007/4/24 火曜日

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

2007/4/19 木曜日

進化したBTOショッピング

2007/2/5 月曜日

とりあえず…

2007/1/20 土曜日

自惚れは続かない

2007/1/13 土曜日

ページ内リンクをアニメーションで

カレンダー

カテゴリー

うりうり教習所

アーカイブ

メタ情報

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