7.音楽と画像

(補足)
すべてのサイズ・回数・音の大きさは数字です。(ピクセル値)
(注1)loop="infinite" で無限に繰り返しです。
(注2)autostart="自動演奏の有無"は 0で無し、1で自動演奏です。
(注3)4−1.4−2.の画像版です。
(注4)本当は、</body> が必要ですが、省略しています。</body>は、ページ全体の構成をするタグなので、チョット解りづらいかも・・(場合によっては、必要ない(もう勝手に決められていて自分では変えられない)所もあるので・・)
(注5)距離は、数字で指定して下さい。ウィンドウの大きさに対しての%表示です。
(左から**% 上から**%の位置と言う要領です。つまり、HPの真ん中に表示したい場合は、左から50% 上から50%の位置が真ん中と言う様になります。)
画像を固定したくない時は、「 ;background-attachment:fixed 」と言うタグを削って下さいね。
詳しくは、ページを全体を構成するタグを見てね。
また、style編を使うと、いろいろなタグ付け加える時に、まとめる事が出来ます。

(例)「HPの背景画像を固定して、さらに、背景画像を1つだけ表示(繰り返し無し)」
<body style="background-image:url(画像のURL);background-attachment:fixed;background-repeat:no-repeat">

この様に、 ;  で区切って、タグをまとめる事が出来ます。(style= の部分のみ)

画像のURLや音楽ファイルのURLの意味が分からないという方は、
画像・音楽ファイルのURLについてを見てみてね。


赤い文字の部分を変更してコピー貼り付けで使ってね!
バックグランドで音楽を鳴らす(注1)<bgsound src="音楽ファイルのURL" loop="繰り返し回数" volume="音の大きさ">
音楽制御パネルを使って鳴らす(注1.2)<embed src="音楽ファイルのURL" volume="音の大きさ" width="パネルの横の長さ" height="パネルの縦の長さ" loop="繰り返し回数" autostart="自動演奏の有無">
画像を表示する<img src="画像のURL">
画像が表示出来ない時に文字で示す<img src="画像のURL" alt="代替の文字">
画像の表示サイズを変える<img src="画像のURL" width="横幅" height="縦幅">
画像の右側に文字<img src="画像のURL" align="left">文字<br clear="left">
画像の左側に文字<img src="画像のURL" align="right">文字<br clear="right">
画像にカーソルが触れると画像が変化(注3)<img src="最初の画像URL" onmouseover="this.src='触れた時の画像URL'">
画像にカーソルが触れて離れた時に画像が変化(注3)<img src="最初の画像URL" onmouseout="this.src='離れた時の画像URL'">
画像をクリックして画像が変化(注3)<img src="最初の画像URL" onclick="this.src='クリック時の画像URL'">
画像が変化、上記3つを全て組み合わせる(注3)<img src="最初の画像URL" onmouseover="this.src='触れた時の画像URL'" onmouseout="this.src='離れた時の画像URL'" onclick="this.src='クリック時の画像URL'">
画像にカーソルが触れると画像が消える(注3)<img src="画像URL" onmouseover="this.style.visibility='hidden'">
画像にカーソルが触れて離れた時に画像が消える(注3)<img src="画像URL" onmouseout="this.style.visibility='hidden'">
画像をクリックして画像が消える(注3)<img src="画像URL" onclick="this.style.visibility='hidden'">
HPの背景を画像にする(画像もスクロール編)(注4)<body background="画像のURL">
HPの背景を画像にする(上記のstyle編)(注4)<body style="background-image:url(画像のURL)">
HPの背景を画像にする(画像を固定編)(注4)<body background="画像のURL" bgproperties="fixed">
HPの背景を画像にする(上記のstyle編)(注4)<body style="background-image:url(画像のURL);background-attachment:fixed">
HPの背景画像を横方向にのみ繰り返す(注4)<body style="background-image:url(画像のURL);background-repeat:repeat-x">
HPの背景画像を縦方向にのみ繰り返す(注4)<body style="background-image:url(画像のURL);background-repeat:repeat-y">
HPの背景画像を1つだけ表示(繰り返し無し)(注4)<body style="background-image:url(画像のURL);background-repeat:no-repeat">
HPの背景画像を1つだけ表示(繰り返し無し、位置を真ん中に指定編)(注4.5)<body style="background-image:url(画像のURL);background-repeat:no-repeat;background-attachment:fixed;background-position:50% 50%">
HPの背景画像を1つだけ表示(繰り返し無し、位置を自由に指定編)(注4.5)<body style="background-image:url(画像のURL);background-repeat:no-repeat;background-attachment:fixed;background-position:左からの距離% 上からの距離%">
文字に触れてHPの背景画像が変化(注4)<font onmouseover="body.background='背景画像のURL'">文字</font>
文字に触れて離れてHPの背景画像が変化(注4)<font onmouseover="body.background='触れた時の背景画像のURL'" onmouseout="body.background='離れた時の背景画像のURL'">文字</font>
文字から離れた時にHPの背景画像が変化(注4)<font onmouseout="body.background='背景画像のURL'">文字</font>
文字をクリックでHPの背景画像が変化(注4)<font onclick="body.background='背景画像のURL'">文字</font>
ボタンを押すとHPの背景画像が変化(注4)<input type="button" value="ボタンの文字" onclick="body.background='背景画像のURL'">



HTMLタグに戻る