忍者ブログ
[450] [451] [452] [453] [454] [457] [460] [459] [462] [461] [464]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

 某県内のIT技術関係でHPコンテストがあることを知り、
さっそく、アクセスUPも期待して、応募することに。

コンテストの分野が2分野あり、1.一般と、2.Web技術
で、2の技術分野で行くかどうか迷ったけど、協賛が
FLASHメーカなので、おのずとFLASHを使った
HPを期待してのことかなと思い、1.一般で応募した。

 応募するに当たって、現在のHPでは、なんとなく
物足りないので、ユーザビリティを強化することに。

でいろいろ考えて、以下の2点で行くことにした。

1.ソフトメニューの導入。
2.トップ画面をマルチサイズ画面対応に。

まず、1.ソフトメニューは、

拍手[0回]



なにしろ、年代毎にコンテンツが増えていく構成になっているため、
年が経つにつれて、コンテンツの選択が複雑になる。

また、各ページに進むと、そこから他のページへ行くのは、
一旦トップページまで戻ってから進むことになるので、
操作が大変だし、時間も電話代も掛かる。

そこで、考えたのがPCでも使われているソフトメニュー。
これを各ページの頭に配置し、各ページから任意のページに
飛んで行けるので、操作性は格段によくなるはず。

操作性としては、

PCでは、まずウィンドウ上部の固定位置のソフトメニュー上を
クリックして、プルダウンメニューを出して、目的のものを選択するが、

HP上では、ソフトメニューを配置しても、固定にするのは、
表示領域を狭めるので論外。そのため、スクロールすれば、
どっか行っちゃうので、PCのように、ソフトメニュー上で
クリックするというのは、初めて来た人には、分からないはず。

で、ソフトメニューの上にマウスが乗ったら、プルダウンメニュー
を表示する方式を考えた。

あとは、これをどうやって実現するかだけど、まずIEでもNetscapeでも
動かすことを考えると、テーブルを使ってはどうもできなそうなので、
レイヤで作ることに。一応、ゲーム等で経験済みなので、
簡単に作れると思ったが、

これが難題。まずメニュー内に表示する文字の書式をCSSで
指定するが、これがよく分からない。で当然IEとNetscapeでは
挙動が違うので、この問題を解決するのが大変。

さらにマウスイベントを取得しながら制御しているが、
マウスを素早く隣の項目に移動するとか、ゆっくり移動するとか、
、するとマウスイベントが来なかったり、
順番が入れ替わったりとかあるので、
この辺は、フラグ制御とタイマ制御でなんとか
おかしくならないように出来た。

まあ、試行錯誤しながらなんとか動くものを作った。

さらにどうせなら、画像を使わずにボタン風に見せたい
ということで、ソフトメニューを5段階のレイヤ構造にして
位置を少しづつずらしながらボタン風にみせられた。

ところが、すべてボタン風に表示すると、100MHzクラスの
PCでは表示が凄く時間がかかる。ということで、
ボタン風に表示するのは止めました。T T);;

ということで、かなり素早く表示してくれるのが出来ました。
一応満足ということで。

PR

コメント


コメントフォーム
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード
  Vodafone絵文字 i-mode絵文字 Ezweb絵文字


トラックバック
この記事にトラックバックする:
忍者ブログ [PR]
カレンダー
07 2017/08 09
S M T W T F S
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
フリーエリア
[-]最新トラックバック
プロフィール
HN:
7maru
性別:
非公開
自己紹介:

バーコード
ブログ内検索
[+]アーカイブ
アクセス解析