画像編
画像を表示させたい
<img src="画像のアドレス">
そのまんまの表示ですね。width="120" height="90" ってのをいじってみましょうか。
簡単に言うと縦横のサイズなのだ。
alt="kyonkyon" ってのも、代えてみましょうね。
さて、どうなるんでしょう？ワクワク。
width="180" height="90"
にしました。おデブさんになっちゃいましたね。
alt="kyonkyon" を、 alt="小泉今日子" に変更しました。
何が変わったんでしょう？
画像にカーソルを合わせてみてください。
違いが判ったかな？
ハイハイ、縦横をそれぞれ２倍にしました。面積は４倍になりますよね？
width="240" height="180" です。
altも 変更しました、カーソル合わせてみそ。
元の画像からサイズを大きくして表示すると、
粗くなってきますので程々に。
キョンキョンのお肌も粗く見えてしまいます。
画像のアドレスとは、 赤い部分 をいいます。
<IMG SRC=" http://plaza.rakuten.co.jp/img/user/74/13/1397413/228.jpg " width="120" height="90" alt="kyonkyon" >
青い部分 は属性と言って補助標識みたいなもの、省略しても画像は表示できるのだ。
画像の表示位置を変更したい
<img align="表示位置"
src="画像のアドレス">
表示位置を left
にしました。画像が左側に表示されてます。
文章が右側に並んでますね。
今度は表示位置を right
にしてみました。画像が右にきましたね。
テキストが画像の左側に変わりました。
center です。画像とテキストの位置関係を見てください。
画像が真ん中に来ましたね、どや？ 画像を半透明にして表示させたい
<img src="画像のアドレス" style="filter:Alpha
(opacity=数値 style=数値)
;"
>
photo shop等の加工ソフトを使わなくてもタグで出来ちゃいます。
opacity=数値 とは、透明度の数値（0～100）を入れるのだ。数値が小さくなると透明度が上がるよ。
style=数値 には、消しパターン（1～3）を選ぶだけ。
見て比べたほうが早いから、画像でお勉強なのだ。
| (opacity=100 style=3); | (opacity=80 style=3); | (opacity=50 style=3); |
| * | * | * |
| (opacity=100 style=1); | (opacity=100 style=2); | (opacity=100 style=0); |
| * | * | * |
ページ毎に背景を変えたい ＝注意＝楽天では使用できません！
<IMG src=" 背景画像のアドレス
" onLoad=this.style.display="none";body.background=this.src;>
それならページを読み込んだと同時に、別の背景画像を読み込ませればいいのだ。
このタグを「本文欄」の一番上に入力しよう。
あら不思議、ページ毎に背景を変更できるのだ、良かったね～。
他の大魔神塾のページと背景が違うでしょ？
下のタグは画面をスクロールしても、背景画像が 固定 されるのだ。
青い部分を追加するだけ。ただ、スクロールが滑らかにならないのが難点。
<IMG src=" 背景画像のアドレス " onLoad=this.style.display="none";body.background=this.src; body.style.backgroundAttachment="fixed"; >
カーソルを合わせると画像が変化 ＝注意＝楽天では使用できません！
<IMG src=" 通常画像
" onmouseover=this.src=" カーソルを合わせた時に表示する画像
" onmouseout=this.src=" 離した時の画像
">
簡単なのだ～。
カーソルを離した際に元の画像に戻るだけなら、 通常画像 と 離した時の画像 を同じにするのだ。
サムネイルの作り方
<a href=" 画像のアドレス
"><IMG src=" 画像のアドレスwidth=○○ height=△△（縮小）
"></a>
リンクの応用なんだけどね、ちょっとやってみましょう。
注意点は、width=○○ height=△△ の数値を同じ比率で縮小する事。
元の画像が width=400 height=300 としたら、
縮小画像は width=40 height=30 （1/10）といった具合に調整するのだ。
マーキーで画像表示例
<marquee behavior="slide" direction="right" width="○○" height="△△">
<img src="左上の画像アドレス" width="○○" height="△△"></marquee>
<marquee behavior="slide" direction="down" width="○○" height="△△">
<img src="右上の画像アドレス" width="○○" height="△△"><br></marquee><br>
<marquee behavior="slide" direction="up" width="○○" height="△△">
<img src="左下の画像アドレス" width="○○" height="△△"></marquee>
<marquee behavior="slide" direction="left" width="○○" height="△△">
<img src="右下の画像アドレス" width="○○" height="△△"></marquee>
当たり前ですが、４枚の画像は同じ大きさにしましょう。
○○と△△の数値は、それぞれ同じ数値を入れてください。
ブラウザの更新ボタンをクリックしてみてね。
どや？画像が上下左右から現れたでしょ？
これを使うときはね、ページの上の部分がいいです。
スクロールしないで見える位置がベストなのだ。
なんでって？
ページを読み込んだと同時に動くから、
ページをスクロールしないと見えない位置だと気づかないのです。
さりげなく演出しましょう。
|
|
|
© Rakuten Group, Inc.
