TOPページ >  リンクを貼る, 画像を表示する/動画/サウンド > 画像にリンクを貼る

画像にリンクを貼る

ホームページやブログなどのウェブサイトに アンカータグ( Aタグ)を使って他のページへジャンプするためのリンクを設定する際に、テキストだけでなく 画像にリンクを貼ることもできます。あらかじめ、画像をアップロードしておいてください。

<a href="ジャンプ先URL" target="ウィンドウの指定">
<img src="画像URL" width="画像の横幅" height="画像の高さ" border="枠の太さ">
</a>
  1. 画像URL:リンクを設定する画像のURLを、絶対パスまたは相対パスで指定します。
  2. 画像の横幅/高さ:画像の表示寸法を指定します。原寸でなくても構いません。省略すると、だいたいは原寸で表示されます。
  3. 枠の太さ:画像の枠の太さを指定します。値は、ピクセル値になります。省略すると ブラウザやスタイルシートの設定によっては 5ピクセル程度の青枠が付いてしまうことが多いので、枠線を表示させたくない場合は、0 に指定しましょう。
  4. ジャンプ先URL:リンクでジャンプさせるページのURLを、絶対パスまたは相対パスで指定します。
  5. ウィンドウの指定:リンク先のページを表示するウィンドウまたはフレームを指定します。下記の中から選択できます。省略すると、『_self 』扱いとなります。現在表示中のページを残したいときは『_blank 』にするとよいでしょう。
    _top 今のフレームのトップページ(フレームが属するウィンドウ)
    _blank 新しいウィンドウを開いて表示
    _self 今のフレームまたはウィンドウ
    _parent 今のフレームを取り囲む一つ上の親フレーム
    任意名称 フレームを使用していなければ新しいウィンドウが開く。 フレームを使用していてフレームの名前と一致している 場合、そのウィンドウ。

サンプルです。

<a href="./sample/linktest.html" target="_blank">
<img src="./sample/flower_pink.jpg" width="160" height="120" border="0">
</a>

このソースを表示させると、下記のようになります。

サンプル画像:ピンク色の花

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
ダウンロードファイルを提供する
同一ページ内へリンクする
未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する
リンク文字のスタイルを指定する
リンクのための基準URLを指定する
クリッカブルマップを作成する
リンク文字の背景色を指定する
リンクの説明を表示する
画像にリンクを貼る
テキストリンクを貼る
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス