ASH INSTITUTE Blog

ページの一部をクリックで表示/非表示切り替え



少し前に模様替えしたサイトの中で、メインコンテンツとなるページのひとつ、
Car design : Exterior の画像の数がやたら多いので、もう少し整理しようと思って
修正作業に取り掛かった。
模様替えした時のコンセプトとして、“なるべく階層を深くせず、出来ることなら
シンプルに全て見渡せるようにしたい” というのがあってこういう事(大量サムネイル)
になったわけだが、それにしても多い。全部見るのに何回もスクロールしなければ
ならない。怒られそうなほどだ。
前のサイトやよそのサイトを見ていて、全部の画像を見せるために階層がいくつかに
なっていたり、数ページにまたがったりするのはかったるいなと思ったし、スライド
ショー形式のものも場合によっては見るのがだるくなって善し悪しだなぁと思って
いたので、こうしたのだが、なんとも…、なかなか全て満足というわけにはいかない。

で、解決策として、javascript を使ってページの一部をクリックで表示/非表示
出来るようにしようという事だ。これならページを移動せずに、興味を持ってもらった
ものだけ、よりたくさんのサムネイルで色々な画像を見てもらえる。
(そのサムネイルをクリックすれば拡大画像が表示されるのはこれまで通り)
少し前ならjavascript を多用するとページが重くなって…なんて心配もしたが、
最近の通信環境なら許容してもらえるかと思う。(許容してほしい…)

方法は、スタイルシートのdisplay:の値を変えることで行う。
表示は display:block; 、非表示の場合は display:none; 。
クリックしたときに、スタイルシートの値を変えるjavascriptの関数を呼ぶことで、
表示、非表示切り替える。
予め、表示切替をしたい部分を
ではさんで
指定しておく。
クリックしたときにヘッダー部分に書いてある関数 disp() をよんで処理する…、
という事で、詳しいことは省略するが、このid="適当な名前"にはまってしまった…。

javascript は面白い効果が得られるので、自分のサイトでいくつか使っているが、
決して良くわかっているわけではない。むしろ基本的なさっぱりなくせに、
欲しい効果のみ得ようと、その時々で最低限の情報を探してやっつけている。
だから、何かつまづくとその解決にやたら手間がかかったりする。
で、今回はこのid="適当な名前"がそれだった。

適当といっても、あんまりいいかげんなものにしてしまって後で困ってはアレなので、
管理しやすいように、意味があってわかりやすい名前を考えてそれぞれあてがった。
functionの数がやや多くて、途中ちょっとまごまごしたり突っかかったりしたが、
(あんまりわかっちゃいないやつがやるにしては)案外すんなり狙った動作をさせる
ことができた。私が常用しているGoogle Chrome と Firefox では。(少し前に親切な
方からご指摘をいただきまして、それからFirefoxでも検証するようにしている。)

だが、肝心な(単純に最もシェアが大きいから) IE : Internet explorer だけが、
うまく動作しない。全く動作しないのではなく、11か所のうち8ヶ所動作しない。
Chrome も Firefox も普通に動作するし、IEでも一部だけは動作するって…、
何なんだ、一体?
で、一晩がかりで色々やってダメで、翌朝もう一度基本的なことから〜 と思って
ソースを見直してみて、もしかしたら id のつけ方に問題があるかも…、と思って
それぞれの id の文字列の前に、id_ と付け足してみたら、
ようやくうまく動作した。
こんなことかよ…。(;´ω`)  まぁ、大体いつもこんなものだけど。

今回は他のブラウザでは動作していたのが混乱の要因の一つだった。
id は基本的に、それが含まれるHTML内において完全に唯一のものにしておけ
という事だ。まさに基本中の基本だ。
そしてそれは、まさに私に大きく欠落しているものだ。 (*´ェ`;) モキュゥ

Chrome と Firefox が動作した要因は気になるが、それはまた別の機会に。

このページがうまくいったので、他にも画像が多いところを2ページほど、
また次の日に同様な処理で修正を加えたのだが、その際、各タイトルの下に置く
横長の大きめな画像(830x150pix)が巨大バナーみたいにことになって、それを
作るのがおもしろくなって楽しかった。(*^ー^)ノ
自分の作ったので楽しめて、つくづくオメデタイ…。
2012年03月26日(月) No.21 (車以外のデザイン、Webデザイン、他)
Comment(0) Trackback(0)

この記事へのコメントは以下のフォームからどうぞ

Name
E-Mail
URL
感想
500文字まで
Icon Icon
投稿キー 投稿キーを右に記入して下さい
Pass

この記事のトラックバックURL

https://ash-institute.cats.st/cgi/diary/sfs6_diary/sfs6_diary_tb.cgi/2012032621
No. PASS

       
   














ASH INSTITUTE Blog