リンクに画像

リンクのボタンを画像にする

●リンク文字色を変えるほかに、ボタンを画像にするという方法もあります。気をつけることは３つぐらいあります。

1. リンクとしてわかりにくくならないように考える。文字も併用するとか、戻る，目次などの共通のリンクは共通の画像を使用するなど工夫すべきです。
2. alt の指定を必ずいれる。文字を併用していない時は、画像が表示できない時にどこへのリンクかわからなくなります。
3. 画像一般に言えることですが，データ量が増えてページの表示までの時間がかかるようになります。作っているときにはすぐ表示されますが、電話回線の環境の人が見ると時間がかかるということになります。校内だけならLANの回線で速いのでわかりにくいですが，インターネットに公開する場合は十分に考慮する必要があります。本当に必要な画像ですか? 16×16の画像は漢字500文字程度に相当するデータ量があります。

どうすればよいか

●画像は文字と同じ行内要素ですから、文字のリンクと基本的には同じです。

<a href="リンク先URL">文字列</a>

であったものが次のようになるだけです。

<a href="リンク先URL"><img src="画像のURL" alt="代替"></a>

画面では次のようになります。

文字列だけのもの：文字列

画像だけのものは：

●"リンク先URL"の書き方は、リンク、リンクに加えるなどを参照。 "画像のURL"は小さな画像を使う課題を参照。

●画像だけではどこへのボタンかわからない場合は、文字で説明を入れるとよいのですが、文字部分もボタンにするかどうかで２つの方法があります。好みで選んでください。

<a href="リンク先URL"><img src="画像のURL" alt="代替"></a>説明文字列

画像だけがボタン　：説明文字列

<a href="リンク先URL"><img src="画像のURL" alt="代替">説明文字列</a>

画像も説明もボタン：説明文字列

●src="" , alt="" , の他に title="" という属性を加えて文字列を書いておくと、マウスを近づけると表示されますから、ここにも説明を書くという手もあります。一部のブラウザでは alt="" の代替文字列をtitleの様に表示するものがありますが、正しくはtitleです。

枠のあるなし

●画像をリンクにすると自動的に枠をつくり、訪れたことがあるかどうかを表示しようとします。たとえば、。しかし、四角い画像ならまだしも、丸いものだとです。これではまずいので、このようなときは スタイルに border-style:none; を書き加えます。

img {border-style: none;}
または
img {border: none;}

●すると、四角は、丸いものだととなります。今では枠線のある画像のリンクは見かけませんが、リンクボタンだとわかるようにすることを忘れずに。

ボタンの形も工夫します。　　

サムネイル

●小さな画像を大きな画像へのリンクにすることはよくあります。たとえばこんな場合です。

クリックすると元の大きさの絵が表示されます。

●このような縮小画像をサムネイルと呼びます。画像はデータ量が多いので、小さなものを表示しておき、詳しく見たい人は必要な画像だけ大きいものを取り寄せるようにページを設計します。

●このような縮小画像は PaintShopPro で簡単に作ることができます。

課題

kuro.html に小さな画像を使ったリンクを一つ以上作ってください。リンク先は自分のページのどれかにします。どんなページにリンクするかわかるようにしてください。