ＨＯＭＥ

画像の貼り付け方

画像を貼り付けるには <img src="アドレス">と打つとできます。
これは簡単ですね＾＾

<img src="back.gif">

↓



画像のサイズを指定する

画像のサイズを指定するには<img src="アドレス " width="横幅 " height="高さ ">といったようにします。
横幅 ・高さ は、ピクセル数か％で指定します。％の場合、ウインドウの大きさに対する大きさの割合となります。
横幅 ・高さ の片方だけを指定すると、もとの画像の横と縦の割合を変えずに、指定した片方のサイズにあわせてもう片方のサイズが決まるようになります。
レイアウトを考えるとピクセル数で指定した方がやりやすいような気がします。

<img src="back.gif" width="50" height="25">
<img src="back.gif" width="25" height="50">
<img src="back.gif" width="10%" height="10%">
<img src="back.gif" width="25">
↓










イメージマップ

イメージマップとは、ひとつの画像に複数のリンクを設定する方法です。
イメージマップでは、imgタグで画像を表示させ、mapタグでそのリンクする位置・リンク先などを指定します。
書いてみるとこんな感じです。
<img src="back.gif" usemap="#map" border="0">
<map name="map">
<area shape="rect" coords="0,0,20,20" href="../../index.html">
<area shape="circle" coords="50,15,10" href="../../index.html">
<area shape="poly" coords="30,30,20,60,60,60" href="../../index.html">
</map>
↓

この画像の左上・右上・左下にリンクが張ってあります。
リンク先はみんな同じですけどね＾＾；


これは、左上のは(0,0)〜(20,20)の四角形で、
右上のは、(50,15)を中心とした半径10の円で、
右下のは、（30,30)、(20,60)、(60,60)を角とする、多角形（ここでは三角形）です。
shape=""で領域の形を指定します。rectは四角形、circleは円、polyは多角形です。
coords=""で位置を指定します。
imgタグのusemap="#〜"とmapタグのname="〜"は同じものを書きます。
位置などを調べるには、その画像をペイントで開き、マウスを持っていくと右下にマウスの位置が表示されます。

画像が表示できない場合、リンクの部分が表示できなくなってしまいます。注意しましょう。


SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送