アイコンプーンはオリジナル素材をフリー （無料） 配布しているホームページ作成支援サイトです

■ 画像の貼り方
<img src="画像のパス" alt="代替テキスト" height="画像の高さ" width="画像の横幅">
例えば、同じ階層(フォルダ) にある、縦10px、横10pxの画像ファイル hoge.gif を貼り付ける場合は、
<img src="hoge.gif" alt="hogeの画像" height="10" width="10">
■ 補足
・ 一つ上の階層(フォルダ) に画像ファイルがある場合のパス
../hoge.gif
・ 一つ下の階層(フォルダ) に画像ファイルがある場合のパス
フォルダ名/hoge.gif
■ 画像を隙間なく並べる
画像を横方向に並べて貼る場合、img要素とimg要素の間に改行を入れてしまうと表示した時に隙間が空くと思います。
<img src="hoge.gif" alt="hogeの画像" width="10" height="10"
><img src="hoge.gif" alt="hogeの画像" width="10" height="10"
><img src="hoge.gif" alt="hogeの画像" width="10" height="10">
こんな感じで途中に改行を入れると隙間が無くなります。
が。。もっと良い方法があるのかも知れません。ご存知の方がいらっしゃいましたら教えてください。
■ 画像の枠線を消す
画像にリンクを指定した場合、枠線が表示されると思います。
枠線を消すには、
<img src="hoge.gif" alt="hogeの画像" height="10" width="10" border="0">
■ スタイルシートの場合
<head>〜</head>内に 
<style type="text/css">
<!--
img { border: none; }
-->
</style>
■ 背景に画像を貼る
<body background="画像のパス">
■ スタイルシートで貼る場合
<head>〜</head>内に 
<style type="text/css">
<!--
body { background: url(画像のパス); }
-->
</style>
■ 補足
・ 背景画像の並びを指定する (画像の並び)
横方向のみ並べる場合には、repeat-x、縦方向のみ並べる場合には、repeat-y を指定します。
繰り返さず、一つのみ表示させるには no-repeat を指定します。
初期値 repeat (タイル状に敷き詰められます)
body { background: url(画像のパス) repeat-x; }
・ 背景画像の位置を指定する (画像の位置)
横方向 (left,center,right) と縦方向 (top,center,bottom) を順に指定します。
横方向、縦方向 ともに実数値+単位、％値での指定もできます。
初期値 left top (左上)
body { background: url(画像のパス) left top 画像の並び; }
・ 背景画像を固定する (画像の固定)
背景画像をスクロールさせず、固定表示にするには fixed を指定します。
初期値 scroll (スクロールします)
body { background: url(画像のパス) fixed; }
・ 背景関連を一括指定するには、指定する値を半角スペースで区切り任意の順で入れていきます。
body { background:背景色 url(画像のパス) 画像の並び 画像の位置 画像の固定; }
各値とも指定しなかった場合には初期値になります。
■ ロールオーバー (画像の入れ替え) させる
マウスが乗ったら別の画像に入れ替わる表現をさせるには
<head>〜</head>内に 
<meta http-equiv="Content-Script-Type" content="text/javascript">
を記述し、<body>〜</body>内の任意の場所に 
<img src="画像1のパス" onMouseover="this.src='画像2のパス'" onMouseout="this.src='画像1のパス'">
■ 表示結果
sample
■ スタイルシートの場合
<head>〜</head>内に 
<style type="text/css">
<!--
.rollover {
     background: url(画像2のパス);
     width: 画像2の横幅;
     height: 画像2の高さ;
}
.rollover a {
     background: url(画像1のパス);
     width: 画像1の横幅;
     height: 画像1の高さ;
     display: block;
}
.rollover a:hover {
     background: none;
-->
</style>
を記述し、<body>〜</body>内の任意の場所に 
<div class="rollover"><a href="リンク先URL"></a></div>
■ 表示結果