calendar

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< August 2018 >>

categories

archives

profile

商品の紹介について

このブログではアフェリエイトを利用して管理人おすすめの紹介をしておりますが、実際の取引はお客様とリンク先商品提供者との間で行われ、当ブログ並びに管理人は一切の責任を負いかねますのでご了承ください。お取引に関して生じる問い合わせは、お取引先までご連絡ください。

jQueryプラグインでスライドショー

0
    JUGEMテーマ:ホームページ作成
    前回jQueryでスライドショー作った記事を掲載しましたが、スライドショー作っている最中に、プラグインとかいう道具があることを知りました。
    この道具、なにやら便利で、優れものの作品が作れるようです。
    数多くのプラグインの中から、スライドショー作成用として目を付けたのが「Slider Pro」。5種類のサンプルを含んだソースコードをダウンロードして使ってみました。
    埋め込みで使うスライドショーを2種類、1週間弱で作っちゃいました。
    その間書き溜めたメモは、ここではなく、別のホームページに載せました。
    ホームページ名は「セカンドライフ事始め」、jQueryプラグインの記事は→このページから3ページです。
    出来上がったものは・・・
    写真が横方向にずれて切り替わる→こちら
    メイン写真の右側にサムネイル画像を縦に並べ、メイン写真切り替えとともにサムネイル画像がずれていく→こちら
    今回の依頼者を満足させるレベルと思うが、さてどの様な反応があるでしょうか。

    jQueryの誘惑

    0
      JUGEMテーマ:ホームページ作成
      所属ボランティア団体でホームページをリニューアルする事になりました。
      仲間とワイワイデザイン検討・・・「写真3枚くらい表示したスライドショーで表紙を飾りたいね」と発言があり、全員乗り気になりました。
      ちょっと待って、そんなスキル誰が持っているの?とお断りしたものの、負けず嫌いが頭をもたげ、jQueryとそのプラグインを勉強する事にしました。
      まずは、jQueryを一から勉強です。
      ごそごそと我流のスライドショーができるまでに約1か月、その間書き溜めたメモを一挙にホームページに載せました。
      ホームページ名は「セカンドライフ事始め」、jQueryの記事は→このページから、現在までで7ページです。
      記念すべき私のスライドショー第一号はこちらです→
      3秒ごとに写真6枚がフェードアウト、フェードインするようにしました。

      ホームページの引っ越し準備

      0
         ホームページを引っ越すなんて、住まいの引っ越しと同じで、メンドクサーイ
        でも、レンタルサーバー屋さんを変えたり、ページ構成を変えたりする事はありうる。
        ・・・ので、あらかじめ準備しまーす。

         ホームページを引っ越す場合は、古いホームページを訪問した人を、引っ越し先に導いてあげなくてはなりません
        導く方法としては、訪問者のブラウザ機能も考慮して、次の2つを併用します。
          古いページを開いた数秒後に、引っ越し先のページを自動的に読み込む
          古いページに案内文を載せ、引っ越し先へのリンクを付けておく

         まず、数秒後に引っ越し先のページを自動的に読み込むテクニックとしては、JavaScriptを使用する方法もある様ですが、ここでは、HTML文書内に記述するテクニックを身に付けます。
        <head>〜</head>要素内に、文書そのものの情報を記述するmata要素の一つとして、次の様に記述する事で、引っ越し先のページを指定秒後に自動的に読み込んでくれます。
           <head>
              ・
              ・
            <meta http-equiv="refresh" 
                  content="秒数;url=引っ越し先URL" />
              ・
           </head>

         次に、引っ越し先へのリンクを付には、HTML文書で<body>〜</body>要素内に次の様に記述します。
            <a href="引っ越し先URL">リンクを示す文字列</a>

        実際のHTML文書は下の様にしました。アンダーラインで示した ↓が上で説明した部分です。
        sc164

        動きはここをクリックして確認して下さい。仮の旧ページが出て来ます。

        なお、ホームページもアップデイトしました。
        こちらからどうぞ→


        ホームページに動画3 (HTML・Objectで動画の埋め込み)

        0
           悪戦苦闘だか・・・
          時間が無いんだか・・・
          2か月余りを要して、ようやく動画の埋め込みができました。

          前章(→こちら)で動画を編集し、保存しました。ファイルの種類は「Windows media ビデオファイル」(拡張子.wmv)です。

          この動画をホームページに埋め込みます。

          さて、その方法ですが、「embed」や「video」、「object」と、いろいろ有る様です。どう使い分けたらよいのでしょう。これは、ホームページを記述しているHTMLの言語や種類、さらにブラウザの種類によります。
           まず、よしじいのホームページ作成用HTML言語はXHTML 1.0 Transitionalですから、この言語のタグでなくてはなりません。その点で、「embed」、「video」は使えません。 なお、「embed」タグは再生用のプレーヤーを特定しないと言う特長を持っている反面、IEでは推奨されていないという欠点もあります。また、「video」タグはHTML5で使用されている動画埋め込み用タグで時代先端のものではありますが、それだけにまだ対応できていないブラウザが多いようです。

          1.「object」の基本的な記述
          「object」タグの基本的な記述は下の通りです。

          <object data="埋め込む動画のファイル名やURL" type="MIME Type" 
                  width="必要なら幅指定" height="必要なら高さ指定">
              <param name="src" value="埋め込む動画のファイル名やURL" />
          </object>

          ●「埋め込む動画のファイル名やURL」を2ヶ所記述しています。<object>内がMozilla系で、<param>内がIE向けで、両方必要です。・・・
          ●1行目「MIME Type」・・・データのファイル形式を示す識別子の事で、Windows Media Videoのデータ(拡張子は.wmv)のMIME Typeは「video/x-ms-wmv」です。
          他にも多くのMIME Typeが存在しますが、ここでは省略します。ネット上で紹介されています。
          ●<param>タグ中の「name」属性として「scr」を使いました。同じ目的で「url」、「video」を「name」属性として使う場合もありますが、今回は「src」以外はうまくいきませんでした。
          ●<param>タグの働き・・・objectの実行に必要な設定値をparameterと言いますその設定のためのタグです。

           それでは実際にHTMLを記述してみましょう。
          下にHTML文書中のbody部分を示します。で囲んだ部分が動画埋め込み部分です。 なお、動画ファイルの名前は「dooga」フォルダの中の「bp7.wmv」です。
          sc160
          動きは右のボタンから確認して下さい。ボタン
          セキュリティ警告が出て動画プレイヤーが表示されない場合は、ActiveXを実行できるようにしてください。


          ところで、動画は自動でスタートし、最後まで来たら自動で止まりました。又、プレイヤーのボタン類も表示されています。しかし、これらの設定は<param>タグ中で指定し変更する事ができます。
           Windows Media Playerでの使用における代表的な<param>タグを試してみます。

          動画を自動スタートさせない      「autostart」を「false」に設定する
          ループで動画再生する         「loop」を「true」に設定する
          コントロールパネルを表示する     「showcontrols」を「true」に設定する
          再生状態を表示する           「showstatusbar」を「true」に設定する

          動きは右のボタンから確認して下さい。ボタン
          セキュリティ警告が出て動画プレイヤーが表示されない場合は、ActiveXを実行できるようにしてください。
           これ以外にも、<param>タグとしては、オーディオコントロールを表示「showaudiocontrols→true」、トラックコントロールを表示「showtracker→true」、があります。ただし、IEのバージョンによってparamの一部は使用できないので要注意です。
           ここまでの作業で動画の埋め込みができる様になりましたが、ブラウザのセキュリティ対策が効いている場合は、本来動画が来る場所にはページ立ち上げ時には何も表示されません。これは回避できません。無理やり回避してもセキュリティ破りになってしまいます。
           やむを得ませんので、ページ立ち上げ時にセキュリティが効いている時には、この動画の代わりに「プレイヤー画面が出ていない場合は、ActiveXコントロールを実行してください」と表示してやります。
           方法は、<object>タグの中に、ActiveXが無効(実行できない)場合の代わりのアクションを記述しておくと言うものです。

          <object data="埋め込む動画のファイル名やURL" type="MIME Type" 
                  width="必要なら幅指定" height="必要なら高さ指定">
              <param name="src" value="埋め込む動画のファイル名やURL" />
              変わりのアクション
          </object>

          代わりのアクションとしては、文章表示、静止画表示、動画ページへのリンクなどがあります。

           例えば代替えとして青太字で「プレイヤー画面が出ていない場合は、ActiveXコントロールを実行してください」と表示したい場合は下の様になります。<object>〜</object>の記述例です。で囲んだ部分です。

          sc161動きは右のボタンから確認して下さい。ボタン
           代替えとしてイラスト、画像を表示したい場合は下の様になります。<object>〜</object>の記述例です。で囲んだ部分です。
          sc162
          動きは右のボタンから確認して下さい。ボタン
           動画の埋め込みには成功しましたが、初期のスクリーンが真っ黒です。これはWindows Media Video(拡張子.wmv)ではやむを得ない事の様です。
           しかしもう少し使い勝手を考えた表示をしたいですね。
           そこで考えたのが、スタートボタンを押す前のプレーヤーはスクリーン部分を透明にして、バックグラウンドを表示させてやろうと言う方法です。
           HTML文書での記述としては、<param>タグの一つとして初期のスクリーンを透明にする「transparentatstart」を追加します。 又、バックグランドをスタイルシートで指定する事になりますので、このobjectにはidを付けておきます。下ので囲んだ2ケ所です。
          sc163
          動きは右のボタンから確認して下さい。ボタン

          ここまでで、動画埋め込みが完了です。あ〜、疲れた。

          なお、ホームページもアップデイトしました。
          こちらからどうぞ→


          ホームページに動画2(「Windowsムービーメーカー」で動画編集)

          0
              パソコン画面をキャプチャーして動画の教材を作ろうとしているのですが、前回(→こちら)ではその第一歩としてキャプチャーのフリーソフトを探し、学びました。ここでは、取り込んだ動画を加工します。
             動画を加工、編集するフリーソフトとしては、「Windowsムービーメーカー」が使いやすく、安心です。パソコンを買った時にプレインストールされて付いて来る場合が多いですが、もし付いていなかったら、ネットからダウンロードできます。 ダウンロードはWindowsのホームページから行います。
            1.「Windowsムービーメーカー」の画面
             
            「Windowsムービーメーカー」を立ち上げると、下のウインドウが出てきます。
             ウインドウ上部に「ムービーメーカーボタン」、「ホーム」タブ、「アニメーション」タブ、「視覚効果」タブ、「プロジェクト」タブ、「表示」タブがあり、いろいろな編集機能が選べます。
             ウインドウ左側はプレビュー画面で、シークバー付きです。
             ウインドウ右側はストーリーボード画面で、画像、音楽、テキストのストーリーボードを表示します。
            sc141

             なおウインドウ上部のタブですが、ストーリーボードに画像、音楽、テキストを登録すると、「ビデオツール/編集」、「音楽ツール/オプション」、「テキストツール/フォーマット」の3つのタブが追加表示されます。
             「Windowsムービーメーカー」を実際に使ってみると、ホームビデオ程度なら十分作れるだけの機能を持っている事が判ります。ところが今回は教材作りですから、すべての機能を使う必要はありません。例えば音声は無いし、画面切り替えエフェクトは不要だし。従って、以下の使用方法は、教材作りとして必要なものだけに絞っています。

            2.編集する動画の登録
             
            初期の「Windowsムービーメーカー」のウインドウ右側には、ストーリーボードは無く、「ビデオおよび写真を参照するには、ここをクリックします」と表示されています。
             そこをクリックすると、下の様にフォルダーのウインドウが現れます。登録し編集したい動画が入っているフォルダーを出し、該当の動画ファイルをクリックします。今回の例では、下ので囲んだファイルです。
            sc142
             で囲んだファイルをクリックすると、「Windowsムービーメーカー」の画面は下の様に変わり、ストーリーボードにその動画が現れると同時にプレビュー画面にもその動画の頭の部分が表示されます。
            sc143

            3.動画の編集
            開始位置の設定
             
            キャプチャー後の動画の先頭部分は、どうしても余分なものが入ってしまいます。まず、その余分なものを取り去って先頭を作り直しします。
             方法は、プレビュー画面で動画を走らせておいて新たに先頭にしたいところで止め、「ビデオツール/編集」タブの中の「開始位置の設定」をクリックします。これで、プレビューもストーリーボードも先頭が修正されます。
            sc144

            分割
             
            次に、動画の中間部分を切り取りしたい(抜きたい)場合は、動画を分割してトリムをかけるか削除をかけるかの方法をとります。この2つの方法の違いは、コマの途中で切り取りしたい場合はトリム、コマ単位で切り取りしたい場合は削除、です。
             これらいずれの方法をとるにしても、まずは動画を分割しなくてはなりません。
             プレビュー画面で動画を走らせて、切り取りたい位置に来たら一時停止させます。ここで「ビデオツール/編集」タブの中の「分割」をクリックしますが、これによってインジケータが乗っていたコマのお尻で分割されます。インジケータをコマとコマの間に置いている場合は、そこで分割されます。
            sc145
            トリム
             
            トリム対象は分割〜分割の間の動画です。トリムをかけると開始位置以前の部分と停止位置以後の部分は捨てられる事になりますので、トリム前には「分割」を上手に使う必要があります。
             トリムの前にインジケータをトリム掛けたいコマの上に置き、「ビデオツール/編集」タブの中の「トリムツール」をクリックします。
            sc146
             それにより、画面が下の様にトリミング用に変わります。今回の場合は、最初の3コマがトリムの対象です。
            sc147
             3コマの中の最後コマを途中で切ってその後を捨てたいので、プレビュー画面で動画を走らせて、その位置に来たら一時停止します。一時停止の後に「トリム」タブの中の「停止位置の設定」をクリックし「トリムの保存」をクリックします。
            sc148
             ウインドウは再び元の画面に戻ります。

            コマの削除
             
            削除したいコマ群の頭とお尻に「分割」を入れた後にインジケータをそのコマ群の上に置いて、右クリックで下の様な一覧表を出します。この一覧表中の「削除」をクリックします。下の例では4コマ目が削除されます。
            sc149
            停止位置の設定
             
            動画の先頭部分と同様に、後端部分でも余分なものが入りがちです。後端の余分なものを取り除くには、プレビュー画面で動画を走らせておいて動画の末尾にしたいところで止め、「ビデオツール/編集」タブの中の「停止位置の設定」をクリックします。
            sc150

            4.テキストの挿入
             
            動画にテキストを挿入する方法は、「ホーム」タブの中の「追加」で、次の3つの種類から選びます。
            sc152

                  a.ムービーの冒頭に「タイトル」を入れる。

                  b.動画の途中に字幕を入れる。「キャプション」と呼ばれる。

                  c.ムービーの末尾に各種情報を入れる。「クレジット」と呼ばれる。
             順番にやってみます。

            「タイトル」
             
            「ホーム」タブの中の「追加」の一番上に配置されている「タイトル」をクリックします。
            sc151
             画面は自動的に下の様に変わります。「テキストツール/フォーマット」タブが表示されます。又、画面左側のプレビュー画面には「マイムービー」と言う文字が入ったタイトル画面が表示され、右側のストーリーボードの冒頭にはテキストのコマが挿入されて「マイムービー」と言うテキストバーも現れています。
            sc153   
             プレビュー画面上ではカーソルが点滅しており、ここに文字を書けます。今回はテキスト「マイムービー」は消して「血圧の管理その7(enter)他の月のシート作成」と打ち込みました。
             「テキストツール/フォーマット」タブの中は下の通りで、「フォント」のエリアではフォントの大きさ、タイプ、太さを設定でき、「段落」では左、中央、右への揃えを設定できます。「テキストの編集」をクリックするとプレビュー画面上にカーソルが出てきてテキストを変更でします。 又、「背景色」をクリックして一覧表を出し、ここから背景色を決めることもできます。
             「開始時間」と「テキストの表示時間」は、実際にプレビューしながら決めていきます。
            sc153a
             上の画面例には入っていませんが、さらに「テキストツール/フォーマット」タブの中の右側には「特殊効果」のエリアがあり、この中から、ムービー上での文字の現れ方を選ぶことができます。
             なお、画面上のテキストの位置の移動はプレビュー画面上でドラッグする事により、可能です。

            「キャプション」
             
            動画の途中に画面上に字幕を入れる事を「キャプション」と言います。教材作りでは、書く場面ごとの説明や各機能の説明として重宝しています。挿入の方法は、「ホーム」タブの中の「追加」の中央に配置されている「キャプション」をクリックします。
             「キャプション」をクリックすると画面は下の様に変わり、「テキストツール/フォーマット」タブが表示されます。又、画面左側のプレビュー画面には「ここにテキストを入力」と言う文字が入ったテキストボックスが表示され、右側のストーリーボードにはテキストのコマが挿入されて「ここにテキストを入力」と言うテキストバーが現れています。
            sc154
             ここで表示される「テキストツール/フォーマット」タブと機能はタイトル挿入時とほとんど同じ(異なるのは背景色の選択は無い点)ですから説明は省略します。又、プレビュー画面の使い方もタイトル挿入の時に比べ、色こそ異なりますが、同じです。
            sc153a

            「クレジット」
             
            ムービーの末尾で主演、助演、出演者、監督、協賛などを流れる字幕で表示しますが、これがクレジットです。「ホーム」タブの中の「追加」の中央に配置されている「クレジット」をクリックして挿入し、クリック後の方法は「タイトル」、「キャプション」と同じです。

            5.ムービーの保存と作業の保存
             
            完成したムービーを保存するには、「ホーム」タブの中の右端付近にある「ムービーの保存」をクリックします。
            sc143a
             クリックすると「ムービーの保存ウインドウ」が出てきますので、このウインドウの中で保存先と保存名を決めて「保存」をクリックします。
            sc156
             動画はメモリー数が大きいので保存にも時間がかかり、下の様なウインドウとしばしのお付き合いです。
            sc157
             ムービーの保存が完了すると、下の様なウインドウが出てきます。特に作業をする必要は無いので、「閉じる」をクリックします。
            sc158
             次に、後にムービーの手直しが発生する可能性がある場合は、作業も保存しておきます。この前提は動画の原本が保存されていることです。
             作業の保存は、「ムービーメーカーボタン」のクリックからです。「ムービーメーカーボタン」をクリックすると下の様なウインドウが現れますので、「名前を付けてプロジェクトを保存」をクリックし出て来る保存ウインドウで保存先と保存名を設定します。
            sc159
             教材に使用できまるムービーができましたので、次回はこの動画をHTMLでページに組み込みしたいと思います。

            なお、ホームページもアップデイトしました。
            こちらからどうぞ→


            ホームページに動画1(「カハマルカの瞳」でキャプチャー)

            0

               この話は、ボランティアでやっているパソコン教室の教材を「動画入」で作ろう決めたことが発端です。
               ツールは、無料のキャプチャーソフトの中から「カハマルカの瞳」を使うことにしました。

              1.「カハマルカの瞳」のインストール
              js125 「カハマルカの瞳」をダウンロード、解凍すると、名前「ojos*_*」のフォルダーが作られます。このフォルダーには判りやすい名前を付けて判りやすい場所に格納します。今回の例では、右の様にデスクトップ上に「カハマルカの瞳」と言う名前で格納しました。

               このフォルダーの中は、下の様になっています。
              js126 赤枠□で囲んだ「ojos.exe」が本体で、これをクリックすると「カハマルカの瞳」が始まります。 又、5つのフォルダーは、動画を保存する「AVI」、音を保存する「MUSIC」、静止画を保存する「PICTURE」、お気に入りを保存する「お気に入り」、プレイヤリストを保存する「LIST」です。 今回の画面キャプチャー目的に対しては、「AVI」にデータが保存される事になります。データはこれらのホルダー以外の場所にも保存できますが、その変更は、「環境設定」→「基本設定」→「AVI」→「保存ファイル」の手順で行います。

              2.「カハマルカの瞳」の初期設定
              js127 「ojos.exe」をクリックすると、右の様なウインドウがでてきます。これが「カハマルカの瞳」の操作ウインドウです。
               さらにこのウインドウの中で、「環境設定(C)」→「基本設定(S)」と順にクリックしていきます。



              js128
               この手順で、下の様な「基本設定」ウインドウが出てきますので、画面キャプチャーの前に、このウインドウで初期設定を行います。基本的には「既定」の値で初期設定されていますので、変更しなくてはならない部分だけをいじれば良いでしょう。

              js129 「共通」タブでは、後々の編集の為に「最終ファイルのほかに残しておきたいもの」にチェックを入れ、保存ファイル名に日時を加えれ可どうか判断しておきます。

              js130 「AVI」タブでは、「保存フォルダ」と「作業フォルダ」を既定のものから変更したい場合は、ここを変更します。又、動画データに圧縮を掛けたい場合は、「コーデック」の「未圧縮」をクリックして圧縮方法のリストを出して選びます。
                「SNAP」タブは静止画面キャプチャー時、{WAVE」タブは音声キャプチャー時に必要に応じて触りますが、今回は触りません。
               「基本設定」ウインドウでの作業が終わったら、ウインドウ右上の「停止」ボタンをクリックすると、このウインドウが消えて、最初の操作ウインドウが再び現れます。

              3.キャプチャー
              js127 この操作ウインドウで、これから行うキャプチャーの為の設定を行います。

               まずは、録画する為に切り取る画面の大きさ(Recording Size)、コマ送り速度(フレームレート)の2つを気にします。「サイズ変更」、「ビット変更」、「時間」は既定の値から始めます。
               また、マウスポインタの動きも動画に取り込みたい場合は、「マウスもキャプチャ」にチェックを入れておきます。


               例えば画面全体が下の様になっており、この中のゲームの部分のみをキャプチャーしたい場合に、「Recording Size」を「FULL」から変更します。 手順としては、「Recording Size」右の「設定ボタン」をクリックして「ターゲット設定ウインドウ」を出し、このウインドウの上で切り取ります。
              js133    上の画像では既に「ターゲット設定ウインドウ」を出しています。このウインドウは下の様になっています。
              js134
               このウインドウ上の左に表示されている画面の中で範囲を指定(マウス左オンで移動)してやると右のモニタ画面には、その指定された範囲のみの画像が表示されます。
              js135
               この範囲指定で間違いなければ「OK」をクリックしますが、範囲指定をやり直ししたければ再度指定できます。
              js136 「OK」クリックで「ターゲット設定ウインドウ」は消え、操作ウインドウに戻ります。操作ウインドウ中では「Recording Size」は「直前の設定」に変わっています。

               次に、この操作ウインドウで「フレームレート」を変更します。1〜30コマ/秒の間の14区切りから選びます。

              js137

               ここでコマ落ちなどの問題が生じないかどうか事前確認します。方法は「TEST」ボタンのクリックです。問題無ければ、右の様なメッセージが出てきます。「OK」をクリックすればこのメッセージは消えます。もし問題がある様であれば「フレームレート」などを調整します。
               これで準備完了です。この後は、「保存名」を記入して「REC」をクリックすれば、キャプチャー開始で、画面下のタスクトレーには「目玉アイコン」が出てきます。
              js138 
              キャプチャー終了は、タスクトレー中の「目玉アイコン」をクリックし、右の様な一覧の中から必要なアクションを選びます。

              js139 「停止」を選ぶと、画面には処理中である事を示す右の様なウインドウが出てきますが、処理が終わるとこれは消えます。
               ここまでで一連のキャプチャー操作は完了しました。できた動画ファイルは、「AVI」フォルダーの中に、下の様に格納されています。で囲んだ画像ファイルが今回作ったものです。
              js140

              なお、ホームページもアップデイトしました。

              こちらからどうぞ→


              JavaScript・「visibility」でメインコンテンツ切り替え=indexページ作りその4

              0
                 2012年も残り1週間。
                ホームページ作りは、いよいよラストステージへ・・・

                 
                今回でホームページ作りも大詰めです。メインコンテンツを配置して、6つのリンクボタンにマウスを乗せると、そのメインコンテンツの内容が変わるようにします。新たに使うテクニックは、スタイルシートでの属性「visibility」指定です。
                 
                属性「visibility」とは、「見えるようにするか否か」を指定する事です。
                 
                属性「visibility」「visible」と指定すれば見える様になり「hidden」と指定すれば見えなくなります。

                 
                前準備として、ページを開いた時に表示されるメインコンテンツを絶対座標で配置します。
                 
                メインコンテンツDIVのIDは「link0con」と名付け、上下2段のから成るtableで構成します。tableの上の段に説明文、下の段に画像を入れます。
                 
                実際のHTML文書には下ので囲んだ部分を追加しました。
                js88サンプル
                 一方スタイルシートでは、このID「link0con」のDIVはで囲んだ様に、絶対座標(510、260)、「visibility」は「visible」で配置します。尚、で囲んだ部分も追加していますが、これはこのtableと文章の属性を指定しています。
                js91サンプル
                右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

                 さて、リンクボタンは6つありますので、6つのDIVを用意します。この6つのDIVのIDは「link1con」〜「link6con」と名付け、「link0con」と同様にtableで構成します。
                 HTML文書は下ので囲んだ部分が追加されました。
                js89サンプル
                 スタイルシートでは、各DIVに対して、下ので囲んだ様に、「link0con」と同じ絶対座標(510、260)、visibility」は「hidden」を指定します。
                js92サンプル
                 これでこのページの初期状態としては、7枚のDIVが重なっており「link0con」が見える状態になります。見た目は、先ほど確認した画面と全く同じです。
                 さてJavaScriptでは、すでに作ってある2つの関数「mouseOver」と「mouseOut」に手を入れます。「mouseOver」では「link0con」を「hidden」にして、「link*con」を「visible」にします。 「mouseOut」では「link0con」を「visible」に戻して、「link*con」を「hidden」に戻します。
                 実際のJavaScriptは、下ので囲んだ部分が追加です。
                js90サンプル
                 これで完成です。

                右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
                 6つのリンクボタンにマウスを乗せてみて下さい。

                 今回は、visibility」属性を使ってメインコンテンツの入れ替えをしました。
                 これでJavaScriptを使った、実際のホームページは終了します。

                なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→


                Javascript・イメージマップでリンクボタン=indexページ作りその3

                0
                    今回は、画像上にあらかじめメール用のリンクボタンを書いておき、イメージマップで位置・大きさを指定したその部分にリンク機能を持たせます。これはJavaScriptの機能では無くHTMLの機能であり、絶対座標とは異なる「画像内の座標」を使います。
                   では、イメージマップを整理しておきます。
                   最初のステップは、イメージマップにしたい画像にusemap属性border属性を追加します。    
                      usemap属性・・・マップにしたい画像に名前を付けます。記述方法は、
                         usemap="#名前"
                        
                  と、マップの名前の前に「#」を付けます。
                      border属性・・・画像の枠の指定です。
                        画像の周囲にリンクを示す枠線を表示させない様に、「0」を指定します。
                   次のステップとして、画像のどの部分をリンクボタンにするのか「マップ」にします。ここで画像内座標を使い、画像内座標は画像の左上がゼロ点です。
                   記述方法は、
                     <map name="指定した名前" id="指定した名前で可">
                     <area shape="リンクボタンの形指定" coords="位置と大きさ指定"
                               href="リンク先を指定" />
                     </map>
                  と書きます。リンクボタンの形と位置、大きさの指定については、下の様になります。
                    形が長方形で、左上座標(画像内)が(x1、y1)、右下座標が(x2、y2)の時:
                         形の指定・・・「rect
                         位置と大きさの指定・・・「x1x1,y1,x2,y2
                    形がで、中心の座標(画像内)が(x、y)、半径がrの時:
                         形の指定・・・「circle
                         位置と大きさの指定・・・「x,y,r
                   説明はこれくらいにして、実際のホームページ作成を続けましょう。
                   「Javascript・タイトルの大きさを変えながら移動=indexページ作りその1」でタイトルの背景として用いた画像の一部にメールへのリンクボタンを追加で書き込みます。下の様なものです。
                      従来の「背景」
                  js68背景枝















                     新しい「背景」
                  js80背景枝













                   この画像は縮小して示していますが、実際には横940px、縦419pxです。メールへのリンクボタンは左上角の座標を(820,146)、右下角の座標を(930,246)にします。
                   実際のHTML文書の修正部は、下の様になります。アンダーラインの画像名を修正し、で囲んだ部分を追加しました。
                  js82サンプル

                   右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
                   JavaScriptが無効の状態でも、メールリンクボタンをクリックするとリンク先を表示します。

                   ここまでが今回の新しいネタです。

                   ホームページ作成は続きます。次は、画面上部中央の「空(そら)」の部分に「お知らせコーナー」を作ります。
                   すでにここまで学んできた手法を使い、次の内容をプログラムに織り込みます。
                       GIFアニメの中でイラストの「飛行船」を飛ばし、

                  js85お知らせタイトル




                       
                       「飛行船」が動画画像端まで飛ぶタイミングでsetTimeoutjs86飛行船
                           使い、「JavaScript・右の端から左の端へ絵の移動」
                           の方法で「飛行船」を移動させ、
                      
                       「飛行船」が画面(containerDIV)端まで来る
                          と飛行船を消し、別のsetTimeoutjs87メールボタン
                          メールリンクの小鳥の画像(GIFアニメ)
                          を出します。






                   ここまでが「お知らせコーナー」のタイトルで、この下の位置にお知らせの中味を書きます。
                   実際のHTML文書は下の通りです。で囲んだ部分で3つのDIVを追加しています。infotitleのDIVはGIFアニメのタイトル画像を収納し、infomoveのDIVは飛行船を収納し、infoのDIVは「お知らせコーナー」の中味です。
                  js83サンプル

                   この3つのDIVは絶対座標とレイヤ(重ね順)で位置を設定しており、下のスタイルシートので囲んだ追加部分です。なお、「お知らせコーナー」の中味のスタイルも追加しているのでの中に書いています。
                  js84サンプル

                   JavaScriptは下ので囲んだ部分が追加です。
                   関数「picStart」の中ので囲んだ部分は、画面が出てからGIFアニメが終わる2380m秒後に関数「picMove2」を起動します。
                   次ので囲んだ部分には、「picMove2」「picMove3」「picMove4」の3つの関数が新たに作られています。
                     関数「picMove2」は、DIV「infomove」の中に飛行船の画像
                       「hikousen.gif」を入れ、100ms毎に関数「picMove3」を起動します。
                     関数「picMove3」は、DIV「infomove」を右に9px動かしx座標817で
                       とどめてから絵を消し700ms後に関数「picMove4」を起動します。
                     関数「picMove4」は、DIV「infomove」の中味を小鳥の画像「mailto.gif」
                       に変えて「jssamplemail.html」にリンクをかけます。
                  js83サンプル

                   右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

                   今回は、イメージマップを使ってホームページのリンクボタンを作りました。
                   次回は、本文とメインの画像を配置してホームページを完成させます。

                   なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→


                  JavaScript・リンクボタンもJavaScriptで=indexページ作りその2

                  0
                      今回も、前回に引き続きJavaScriptを使って実際のホームページを作ります。絶対座標レイヤ(重ね順)に加えて、メソッド「getElementById」を使いこなします。
                     では、今回のテクニックを整理しておきます。

                    絶対座標・・・スタイルシート上で指定します。記述方法は、
                          セレクタ { position: absolute; 配置場所; 数値; }
                    absoluteの親要素にpositionが指定してある場合は、その親要素の左上がゼロ点になります。指定方法はabsoluteまたはrerativeで行います。

                    レイヤ(重ね順)・・・スタイルシート上で指定します。記述方法は、
                          #要素ID名 { z-index: 0; position等のその他の属性; }
                          と、z-indexを指定することにより重ねて置くこと事ができます。
                          z-indexは0からスタートし、数が小さいほど下になります。

                    メソッド「getElementById・・・JavaScript文書内で、
                          var 変数 = document.getElementById("探し出したいオブジェクトのID")
                          と書き、探し出したオブジェクトの内容を変数にします。
                          詳しくはく「JavaScript・文字の書き換え、絵の置き換え・・・DOMって言うんだって」を参照してください。

                     では実際にHTML文書を記述します。まず一つのリンクボタンに対して、通常(マウスが外れた時)見える画像とマウスが重なった時に見える画像とを用意します。

                       マウスが外れた時に見えるボタンの画像 link1imga.gif
                    js71ボタン



                       マウスが重なった時に見える画像 link1imgb.gif
                    js72ボタン


                     実際のHTML文書は下の通りです。2つのDIVを追加します。1つはページ下部の背景になるで囲んだ「草原風」の塗りつぶしで、もう一つがで囲んだリンクボタンのDIVです。リンクボタンの画像はlink1imga.gifを用い、マウスが重なった時に関数mouseOverを呼び出しマウスが離れた時に関数mouseOutを呼び出します。
                    js73サンプル

                     この2つのDIVは、下の様にスタイルシートで、「絶対座標」と「重なり順」を決めています。
                    js75サンプル

                    さてHTML文書の中で呼び出される2つの関数mouseOverとmouseOutはJavaScript文書の中でで囲んだように、「getElementById」メソッドで画像の置き換えをします。両関数とも、まず「getElementById」メソッドでIDが「link1img」の画像を呼び出し、次にそれぞれの関数の役割として画像を差し替えします。
                    js74サンプル

                    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
                    リンクボタンにマウスを載せたりクリックしたりしてみて下さい。


                     「これで一つできた!」
                    と言いたいところですが、このようなリンクボタンを6つ作らなくてはなりません。JavaScript文書内に同じ機能の関数を6セットも作りたくありませんので、今回作った2つの関数を少し手入れします。
                     まず、関数が処理している内容に注目します。この2つの関数ともに、HTML文書内の画像をIDで探し出し、そこに別の画像を差し替えます。このHTML上のIDと画像の名前は非常に似た名前で作っておきました。そこで方法として、HTML文書上のID、画像の名前をそれぞれ変数として定義し、これらの変数を、関数の引数linkを利用して組み立てます。
                     具体的には、下ので囲んだ様にJavaScript文書を修正しました。
                     薄いで囲んだ部分が変数の定義(計算式)で、アンダーラインの部分が元のJavaScriptに変数を代入した部分です。
                    js76サンプル

                     これに対応してHTML文書も、引数linkを渡す様に修正します。下のID「link1」のDIVの中でアンダーラインを引いた部分が修正部分です。引数として「link1」を割り当てています。
                    js77サンプル

                    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
                    さきほどのサンプルと全く同じ動きをします。

                     これで一つできました。残り5つのボタンを作ります。JavaScript文書はもう触る必要なく、HTML文書でボタンを増設し、スタイルシートで絶対座標と重ね順を決めてやればOKです。ちなみに画像は、すでに紹介した2つも加えて
                        引数「link1」〜「link6」に対して、「引数imga.gif」、「引数imgb.gif」
                        2種類、12個を用意します。
                    まずHTML文書には、ID「link1」のDIVと同様な内容で「link2」〜「link6」のDIVを作ります。
                    js78サンプル

                     次にスタイルシートでは、「link1」〜「link6」の絶対座標と重ね順を定義してやります。下ので囲んだ部分を追加しました。
                    js79サンプル
                    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

                     今回は、絶対座標、レイヤ、メソッド「getElementById」を使ってホームページのリンクボタンを作りました。
                     次回は、「お知らせ」、「トピックス」の欄を作ってみます。

                     なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→


                    JavaScript・タイトルの大きさを変えながら移動=indexページ作りその1

                    0
                        JavaScriptも23回にわたって勉強して来たので、ここらでぼちぼち実戦ぢゃ
                      ボランティア団体「おたすけシルバー隊」のホームページを作り直しするタイミングなので、こいつをまな板に乗せちゃいますよー。(現在のホームページはこちら→)
                       では、始まり始まり〜♪

                       今回からは、絶対座標スタイルシートの制御レイヤ(重ね順)をマスターしながら、実際のホームページを作っていきます。
                       はじめに、今回のテクニックを整理しておきます。

                      絶対座標
                      ・・・スタイルシート上で指定します。記述方法は、
                         セレクタ { position: absolute; 配置場所; 数値; }
                      absoluteの親要素にpositionが指定してある場合は、その親要素の左上がゼロ点になります。指定方法はabsoluteまたはrerativeで行います。

                      JavaScriptで行うスタイルシートの制御
                      ・・・JavaScript文書内で、
                         document.all.オブジェクト(要素)のID名.style.属性
                      とオブジェクトを指定して制御します。

                      レイヤ(重ね順)
                      ・・・スタイルシート上で指定します。記述方法は、
                         #要素ID名 { z-index: 0; position等のその他の属性; }
                      と、z-indexを指定することにより重ねて置くこと事ができます。z-indexは0からスタートし、数が小さいほど下になります。

                       では実際にHTML文書を記述します。タイトル部分としては、背景、文字部、飾りの3つの画像を絶対座標で配置し重ねます。
                            背景 silvertai6.jpg
                      js68背景枝

                           文字部 silvertai6moji.png
                      js69タイトル
                           飾り silvertaisun.png 
                      js70太陽

                       実際のHTML文書は下の通りです。3つの画像を入れるDIVにID名を付け、大きさを変えたい画像silvertai6moji.pngと画像silvertaisun.pngにもID名を付けています。また、head部では、で外部スタイルシートを、で外部JavaScriptファイルを指定しています。
                      js64サンプル

                       次にスタイルシートに移ります。
                       スタイルシートでは、ID名を付けた各DIV毎に、絶対座標位置、重ね順を指示します。又、HTML文書内でこれら3つのDIVの親要素として「trial」と言う名のDIVを作りましたので、このDIVにはゼロ点相対座標(親の「container」DIVの)を指示しました。この結果、「trial」DIVの中で絶対座標が使える事になりました。
                      js65サンプル

                       最後に、JavaScriptを記述します。
                       動きの基本は、スタイルシートを制御するdocument.all.オブジェクト(要素)のID名.style.属性で、文字部imgと飾り(太陽)imgの大きさ(width)を制御し、一方で文字部DIVの位置(pixelLeft)も制御します。この制御の間隔は30msごとに行い、これはsetIntervalを使います。この動きはclearIntervalで止めます。
                       流れとしては、onload時に呼び出す関数picStartで、位置、大きさの初期設定の後、setIntervalで30ms毎に関数picMoveを働かせます。関数picMoveでは、文字部imgを3px大きくし、飾り(太陽)imgを1px小さくし、飾り(太陽)DIVの位置を3px右へ移動させます。文字部imgのwidthが477px以上になったらclearIntervalを使って動きを止めます。
                      js66サンプル

                      右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
                       今回は、絶対座標、JavaScriptによるスタイルシートの制御、レイヤを使ってホームページのタイトル部を作りました。
                       次回は、リンクボタンを作ってみます。

                      なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→


                      | 1/4PAGES | >>