0

これが正しいアプローチなのか、それとも質問なのかわからないので、詳しく説明します。

このライブページにアクセスしてくださいhttp://thedinnerparcel.co.uk/index.php?option=com_content&view=article&id=22&Itemid=3

基本的に、ヘッダー div のどこかにリンクを重ねることができるかどうか尋ねています。具体的には、右側のステッカーの背景画像の上ですか?

私はサイトを構築していませんが、ヘッダー div の右隅にステッカーを追加しただけです。(参考までに、これは Joomla サイトなので、PHP テンプレート ファイルを使用します。)

これを背景画像として作成し、パディングと負のマージンを使用してオーバーフローさせた後、ステッカーを注文ページにリンクする必要があることに気付きました.

これをリンクにするには、イメージ マップが最適な方法でしょうか? それとももっと良い方法がありますか？

画像マップが方法である場合、誰かがコード例を入手しています。

同様の主題に関するチュートリアルから編集した以下のコードを試しましたが、これは機能しません

<div id="header"  usemap="#Image-Maps_2201202140621298">
<map id="Image-Maps_2201202140621298" name="Image-Maps_2201202140621298">
<area shape="rect" coords="0,0,275,44" href="#" alt="Dinner Parcel" title="Dinner Parcel"/>
</map>
</div>
4

3 に答える 3

0

次のコードをそのまま貼り付けてください。

<a>ヘッダー div の末尾にa を追加します。

<div id="header">
  <div...
  <div id="menu">...
  <a class="my-map" href="#"></a>
</div>

次に、次のスタイルを追加します。

#header{
   position:relative;
}

.my-map{
width: 190px;
height: 190px;
display: block;
position: absolute;
bottom: 26px;
background: #EEE;
border-radius: 95px;
right: 2px;
}
于 2013-08-19T17:03:14.833 に答える
0

あなたの HTML では、menu_bg6.png へのリンクが見つかりませんが、次のusemap=ようにタグを配置する必要があります。

<img src="menu_bg6.png" alt="an image" usemap="#usethismap">

つまり、DIV タグではなく、IMG タグです。

次に、対応する<map>タグを作成すると、それが機能するはずです (ただし、クリックして操作するための URL を挿入することを忘れないでください。現在の URL は「#」です)。

これは、画像上にクリック可能な領域を配置するためのより多くのアイデアを備えた単純な jsFiddleです。

IMG タグを使用せずに、DIV の疑似「イメージ マップ」を作成する方法について説明している記事を次に示します。

于 2013-08-19T17:20:16.560 に答える