スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しいブログのプレゼンの試み その仕組み

 ここのところブログの投稿で、スタイルシートのVisibilityを操作するスライドショーを紹介してきた。絶対配置で同じ位置に複数の画像を非表示(hidden)モードで配置しておきJavascriptでクリックするごとに表示したい画像を表示(visible)モードに切り替えて、その画像だけを表示するという仕組みだ。

 ブログでいきなり絶対配置をスタイルシートで指定すると、とんでもないところに画像が配置される。これを避けるために、配置するためのレイヤーを相対配置(relative)モードで作成し、そのレイヤー(DIV領域)の内部に複数のオブジェクトを絶対配置をすればいい。そしてまずすべてを非表示にした後、特定の画像だけを表示にするというわけだ。

 どの画像を次に表示するかは、変数を使用する。スクリプトの中では変数の値を保持できないので、変数用のレイヤーを作成し、そのz-index値に変数の値を毎回読み出し、書き換えして保存するというのがどんぐり流の最近の変数の利用法だ。
 なぜ変数にz-index値を使うかといえば、単位がなく読み込み書き出しができるからだ。widthなどの要素を使えば、pxという単位がついて読み出され、数値だけを使うのに無駄にソースを記述しなければならないからだ。

 画像とテキストレイヤーを含んだレイヤーにp1,p2,p3,p4....などと連番のID名付け、そのVisibility要素を操作すれば、クリックごとに画像とその説明の文章が切り替わって表示されるというのが今考えているプレゼンの仕組みだ。

 ID名からその要素を引き出すには document.getElementById('ID名').style.visibility
でその表示属性を参照できる。この命令で切り替えるわけだ。

 この説明だけでわかる方は、ソースの開発に挑戦してみてください。
 

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。