オンマウス・オーバーの作成法 サンプル (小さな窓の画像にマウスを当てると大きな画像に入れ替わるものです)。 結構便利で軽くて優れものです. 1.準備作業 (1)最初にデスクトップ又はマイドキュメントに中に以下の準備をする。 ・オンマウスアルバム(名称は自由)フォルダを作る。 ・そのフォルダー内に半角英数でonmousealbam(名称は自由)等の名前のフォルダーを作る。 ・その中に大きさを揃えた必要数の写真を保存する。 2.作成手順 (1)ビルダーを開き新規ページを作成 (2)2列4行の表を作成、表の幅は700程度(構成は自由) (3)画像の挿入 ・左側の枠の4行を結合し一つにする、ここにTOPの画像(内容は自由)を挿入 ・TOPの画像に名前を付ける、画像を右クリックして属性の変更を選択、その他のタブを選び名前を英数小文字で a(名前は自由)とする、OKで完了。 ・右の窓に順次画像を挿入する、このときもとの画像が大きいので枠も大きくなるが気にしない。 ・ これを「画像の属性の変更」で100p×70p程度に小さく設定します。 (写真の属性を変える時は画像を、表やセルの属性を変える時は表やセルをそれぞれをアクティブにしてから 右クリックで「属性の変更」をおこなう。) (4)右の小さな画像にイベントを設定する ・画像を選択し右クリックで「イベントの設定を選択」 ・イベントの編集 ![]() ・イベント(V)OnMouseOverを選択する。 ・スプリクト(R)a.src=this.srcと、入力(aはTOP画像の名前)) ・「登録(A)」 ・「OK」 ・残りの小さな写真にも同様A設定しプレビューで確認すれば完了です。 3.オプション (写真の切り替わり時に写真のコメントが入るオンマウス・コメント入り) (1)大きなセルに一行テキストを挿入したい箇所を選んでカーソルをおきます (2)メニューバーの「挿入」から「フォームと入力部品」を選びます。 ・一行テキスト領域を右クリックし属性の変更を選択します ![]() ・名前をcomment(名前は英数小文字であれば自由)と記入 ・初期値に説明文を記入OKをクリック (3)2の(4)と同様に画像を選択し右クリックで「イベントの設定を選択」 ・「OnMouseOver」を選びスクリプトにスプリクト(R)に ;forms[0].comment.value='コメント'を記入(コメントを説明文に変更 登録をクリック (最初のセミコロン ; コロン半角英数 ' を注意して記入、文字にスペースは付けない) これで全て完了プレビューで確認しておしまい。 |