(*2a) 効果 クリック時サウント ホバー時サウンド
塗りつぶし "fill" nnmoo.aupiroro.au
ミックス "average" paa.au kokeko.au
塗りつぶし "fill"guwaran.au bigban.au
グロー "glow"
〃
〃
塗りつぶし "fill"
グロー "glow"
反転グロー "reverseGlow"
凸きだし "bevelOut"
凹み "bevelIn"
(*2b)
ホバー時サウンド spacevoice.au
ホーム へ サンプルページ ホバーボタン 2 hvbt2.htm
”ホバーボタン” 、画像/ボタンのマウスオーバー/クリックで画像の変化/サウンド/サイトオープン。 Java Applet。 コピー、編集し、簡単にご自分のWebで応用可。 all 対応。
デモは、左下のステイタスバーの、『アプレットは開始しました、……、ページが表示されました』 の”準備完了!”を待ってから。 16個のサウンドファイルの読み込みに時間が……。
・ ローカル(=PC)への保存は、hvbt2.htm、fphoverx.class、fphover.class、 ImageAudio.class、Z17A1L_sl.jpg、上の sho.au、……などを右クリックします。 [対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 変わってしまったファイル名や、*.html 中のパスは要修正。
・ このJava Appletの実装方法は、hvbt2.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。 <applet code= から </applet> までのJava Appletを選択します。
・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。 下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。 ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。
・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。 更新の確認は、ie、Safariやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。
・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*..class と、AUサウンド(*.au、*.snd) なども転送/配置し実施。 ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。 FTPなどで変わったファイル名は要修正。 スクリプト構文中への改行混入は非作動原因。
・ 関連情報 : 色記号6、2、スタイルシートリファレンス、ホームページ開設入門が便利!。 Web Development、Web開発、MSDN IE8 HTMLとCSS、開発ツールでサイトを修正、スクリプト デバッグの概要、HTMLとCSSのサポート、CSSの改良点、IE7、IE6、XML、DHTML。
(*1) : hvbt2.htm (例) 挿入先の <head> 〜 </head> の、〜 部分にペーストします。
HTMLの編集方法 | (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
〔この列ペースト不要〕
シフトJIS使用(削除不可) ieなどに表示するアイコンファイル名(削除可)
<style type= 〜
</style>は(削除可)
リンクを新しいWinで開くを標準(削除可)※:target= いろいろ |
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <link REL="SHORTCUT ICON" href="favicon.ico"> <style type="text/css"><!--
<base target="_blank"> <title>サンプルページ ホバーボタン 2</title> |
(*2a)
: hvbt2.htm (例) 挿入先の <body> 〜 </body> の、〜 部分にペーストします。
HTMLの編集方法 | (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
〔この列ペースト不要〕
説明文(動作と直接無関係)
(Java Applets開始)ボタンサイズ 文字色 ホバー効果(グロー) ※:効果の種類 リンク先のURL
表示文字
書体 文字゙サイズ 新しいWinで開く ホバー効果サウンド クリック時サウンド ホバー効果色 (Java Applets終わり) (以下同様) この間の記述を省略 →
(Java Applets開始)ボタンサイズ ホバー効果(グロー) リンク先のURL ボタン文字
文字サイズ 文字色 書体 新しいWinで開く ホバー効果色 ボタン色 (Java Applets終わり) (以下同様) この間の記述を省略 →
(Java Applets開始)ボタンサイズ ホバー効果(凹み) ボタン文字 リンク先のURL
文字サイズ 文字色 ボタン色 書体(斜体) 新しいWinで開く ホバー効果色 (Java Applets終わり) (以下同様) 説明文 |
<p> </p> <p> 効果 value= クリック時サウンド再生 ホバー時 </p> <p> <applet code="fphover.class" codebase="./" width="100" height="25"> <param name="textcolor" value="#FEFB92"> <param name="effect" value="glow"> <param name="url" value="firework.htm" valuetype="ref"> <param name="color" value="#8500DD"> <param name="text" value="花火 \^o^/"> <param name="font" value="Dialog"> <param name="fontstyle" value="bold"> <param name="fontsize" value="12"> <param name="target" value="_blank"> <param name="hoversound" value="zudon.au" valuetype="ref"> <param name="sound" value="sho.au" valuetype="ref"> <param name="hovercolor" value="#FE5865"> </applet>
==== コメント: この間説明の記述を省略。 全HTMLは、 hvbt2.htm をエディターで参照してください。 ========
<p> <applet code="fphover.class" codebase="./" width="100" height="25"> <param name="effect" value="glow"> <param name="url" value="http://www.rising.ne.jp/web/f_menu.html" valuetype="ref"> <param name="text" value="ライジングネット"> <param name="font" value="Dialog"> <param name="fontsize" value="12"> <param name="textcolor" value="#FFD5FF"> <param name="fontstyle" value="bold"> <param name="target" value="_blank"> <param name="hovercolor" value="#EE0047"> <param name="color" value="#756455"> </applet>
==== コメント: この間説明の記述を省略。 全HTMLは、 hvbt2.htm をエディターで参照してください。 ========
<p> <applet code="fphover.class" codebase="./" width="140" height="25"> <param name="effect" value="bevelIn"> <param name="text" value="QuickTime Showcase"> <param name="url" value="http://www.apple.com/quicktime/showcase/" valuetype="ref"> <param name="font" value="Dialog"> <param name="fontsize" value="12"> <param name="textcolor" value="#F7FFC6"> <param name="color" value="#8B00DF"> <param name="fontstyle" value="boldItalic"> <param name="target" value="_blank"> <param name="hovercolor" value="#6600B9"> </applet> くぼみ </p> |
効果の種類 : グロー= "glow" 反転グロー= "reverseGlow" 塗りつぶし= "fill" ミックス= "average" 凸きだし= "bevelOut" 凹み= "bevelIn"
(*2b) : hvbt2.htm (例) 挿入先の <body> 〜 </body> の、〜 部分にペーストします。
HTMLの編集方法 | (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
(Java Applets開始)画像サイズ 画像URL、ファイル名 ホバー効果サウンド 画像配置座標
|
<p> <!--webbot bot="HTMLMarkup" startspan --> <applet code="ImageAudio.class" width="101" height="89"> <param name="image" value="Z17A1L_sl.jpg"> <param name="audio" value="spacevoice.au"> <param name="x" value="150"> <param name="y" value="12"> <param name="w" value="22"> <param name="h" value="22"> <param name="color" value="16711680"> </applet> <!--webbot bot="HTMLMarkup" endspan --> |