【ＣＳＳ】ちょっと欲張りすぎ？ こんなメニューが作りたい。

質問

■リンク１
■リンク２
■リンク３

（※１）■はイメージで、リンクを持っている。
（※２）各行の空白をクリックでもリンクｎをクリックと同じ動作。各リンクとイメージは別のリンク。

上記のようなメニュー形式を実現したいです。

（※１）までなら以下の様な記述で実現できました。
<a href="hoge.html"><img src="hoge.jpg" alt=""/></a><a　href="piyo.html">リンク１</a>
しかし、(※２)各行の空白をクリックでもリンクｎをクリックと同じ動作の実現の仕方がわかりません。

名案ありましたら、教えてください。

回答No.3

ran_2323

説明がイマイチ理解しきれなかったのですが…考え方を変えれば解決するのではないでしょうか…？？

>（※１）■はイメージで、リンクを持っている。

という点を、■を背景画像に敷いて、リンクｎを含むXpx×Ypxの範囲をリンク範囲として設定する…ということでいいのではと思います。

＜スタイル＞--------------------------------------------
#link_menu,
#link_menu li{
list-style:none;
margin:0;
padding:0;
}
#link_menu a{ //各リンク範囲設定
display:block;
width:150px;
height:50px;
}
.menu1 a{
background:url(画像のパス) no-repeat 0 0; /*■画像の指定*/
padding-left:20px; /*■画像分のスペースをとる*/
}
・
・
・
（リンクごとに異なる画像を使用する場合は複数記述）

＜ＨＴＭＬ＞--------------------------------------------

<ul id="link_menu">
<li class="menu1"><a href="#">リンク1</a></li>
<li class="menu2"><a href="#">リンク2</a></li>
<li class="menu3"><a href="#">リンク3</a></li>
</ul>

見当違いな回答だったらすみません…！

補足

ran_2323さん　ご回答ありがとうございます。

質問の仕方が的確ではなかったです。すみません。

[イメージ][リンク][空白　　　　　　　　　]改行
　　　　　　　　　　　　　　　　↑ここをクリックの時にリンクをクリックと同じ動作にしたい。

[リンク]は[イメージ]のすぐ隣に配置したいので、できればpadding-leftで調整もしたくないです。

でも頂いたご回答を参考に、考えてみます。