画像を使ったスクロールバーの作り方・・

質問

http://www.ktv.co.jp/kimiomo/

ここの【ストーリー】のページにあるようなスクロールバーの作り方が分かる方居られましたら、参考になる雑誌・サイト・アドバイスなどお願いいたします。

Dreamweaverで作っている感じなのですが・・
違うかな～・・(;^_^A

回答No.2

Joh_Taka · ベストアンサー

結構複雑なことをやっていますね。

一見インラインフレームのように見えますが、CSSの position : absolute で絶対位置指定した Up Down ボタンとスライダーをスクロールバーに見立ててJavaScriptで上下にスクロールさせる関数の呼び出しや、スライダーの位置を取得してウインドウ内に表示させた子Layer（CSS-Layer）をスクロールさせるといった感じですね。

なるほど、この方法だとスクロールバーの自由なカスタマイズのみでなく、NN4.xでは表示不可能な <iframe> の代用としても大変有効な手段ですね。

このご質問で、私も大変勉強になりました。

さて、CSSとJavaScriptの組み合わせということで、DHTMLのサンプルや解説をされているサイトで、同じようなものがありましたのでURLを貼っておきます。

ご参考になれば幸いです。

http://www.din.or.jp/~hagi3/JavaScript/JSTips/DHTML/External/ScrWin.htm

参考URLでは、<iframe> と同じ効果をNN4.xでも表現出来ないかを探る Cross Browser の為のアプローチなので、スクロールの上下ボタンとスライダーは Opera 7 風のシンプルなものですが、共に画像を使っているのでカスタマイズ可能です。

上下のボタンのみでCSS-Layerをスクロールさせるシンプルな方法は、 http://www2.ocn.ne.jp/~yoochan/decoration/JavaScript/sample/DHTML_samp12.htm をアレンジしたような形でよく見かけますが、閲覧者が直感的に操作しやすいように通常のスクロールバーと全く同じ機能を備えたスライダーを配置するところがミソですね。

私は Dreamweaver を使っていませんので、ソフトを使っての具体的な操作方法については解りませんので、そのあたりは他の方々の回答をご参考下さい。

試しに手持ちの GoLive CS で同じようなものがある程度簡単に作成出来るか試してみましたが、GoLiveの標準アクションメニューにCSSエディタとJavaScriptエディタ（全てGoLiveに付属の機能です）での操作の組み合わせで、作成可能でした。
（若干、余分なソースの削除を手作業で行う必要がありましたが・・・）

そのことからも Dreamweaver の機能を複合的に組み合わせれば出来そうな気がしますが・・（自信なしです）
少なくとも、完全に手打ちでソースを記述するよりは楽かもしれません。

ですが、ご質問に例として挙げられているサイトのソースは、少しおかしな点がありながらも、ソフトが生成したソースにしては、なんか整然としすぎるような・・。

これは、プログラマが手打ちで記述したように私は感じましたが・・・。
実際は、どうなんでしょうね？

あまり実の無いアドバイスで失礼致しました。

参考URL：

http://www.din.or.jp/~hagi3/JavaScript/JSTips/DHTML/External/ScrWin.htm

お礼

有り難うございます。

＞ソフトが生成したソースにしては、なんか整然としすぎるような・・。

そうですね。
このページのソースを見たときに、JavaScriptが『function MM_preloadImages() ・・』のように書かれていましたのでDreamweaverかと思ったのですが・・
（「MM_」というのがMacroMediaの略かと思っていましたので・・）
でも外部ファイルの【scroll_story.js】はそうなっていませんでしたね。

これが手打ちでしたら今のわたしの知識ではお手上げですね。
教えていただいたページを参考にして少しずつ勉強していきます。

回答No.4

WETCOLD

flash でしょう。

flash を起動させると flash UI Components の画面があり(表示させ)、scrollBar をドラッグさせると対象要素をスクロールできます。

この scrollBar をもとに変更すればできると思いますが、スクリプトは長く、画像変更だけでいけるかは疑問です。(現時点)

お礼

ありがとうございます。
わたしも最初はFlashだと思っていたのですが、なんとなくソースを見てみたら違うようでしたので質問してみました。
Flashなら簡単なんですけどね
・・といっても参考本を見ながらですので当たり前なのですが・・

回答No.3

noname#7132

アドバイスです。

自分のところでもやってみようって意味ならば
おやめになってはいかがでしょうか？

私はJavaScriptはオフにしていますので
紹介があったページのスクロールバーはまったく機能しません。
動かないただの「スクロールバー画像」です。

「一般論として」JavaScriptを有効にしないと閲覧できない
ページは最低です。これは心ある多くの人が主張します。
世の中はアクセシビリティを高めようって方向に動いているのに、
わざわざ時代に逆行する必要はないでしょう。

無視するのが大人です。

お礼

有り難うございます。

＞世の中はアクセシビリティを高めようって方向に動いているのに、
わざわざ時代に逆行する必要はないでしょう。

わたしもそう思います・・

・・でも
＞JavaScriptを有効にしないと閲覧できない
ページは最低です。

とは思っていません。JavaScriptやFlashを使ったページで楽しいページも沢山ありますので・・
まじめな情報ページなら遊びは無いほうがいいと思いますが、今回のようなページをどう位置づけるかは難しいところですね。
情報ページではありますが、ドラマの宣伝としてセンスの良い所を見せなくてはいけないし、他の局のページに比べてダサダサだったら次から仕事は来ないと思います。

本来ならどちらでも観覧出来るように両方作るべきなのでしょうが、料金や時間の問題から難しいのかもしれませんね。

ちなみにわたしは自分のページは持ったことはありません。
仕事でもありません。

でも仕事だったら・・と考えた時に、クライアントから今回のような要望があったとして・・
ユーザビリティやアクセシビリティを説明する時に、作ろうとすれば作れるけどお薦めしない・・というのと、作れないのでは説得力も違うと思います。

回答No.1

shy00

アドバイス・・・
ソースを見ましょう

補足

有り難うございます。
ソースを見てみましたがチンプンカンプンでした・・

アドバイスが
＞ソースを見ましょう

だけ・・ということは、ソースを見ればだいたいの人は理解できる・・というほど簡単なレベルということなのですよね。

お手数ですが、わたしにはソースを見てもよく分かりませんでしたので、ぜひ具体的なアドバイスをお願いしたいのですが・・

よろしくお願いいたします。