はんこ、いりますか？

2007/4/24 火曜日

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

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)

2007/1/13 土曜日

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

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/4/24 火曜日

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

2007/1/13 土曜日

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

カレンダー

カテゴリー

うりうり教習所

アーカイブ

メタ情報

はんこ、いりますか？

2007/4/24 火曜日

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

2007/1/13 土曜日

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

カレンダー

カテゴリー

うりうり教習所

アーカイブ

メタ情報

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