0

画像上の特定のクリック可能な場所を作成しようとしています。画像のサイズはブラウザーのサイズに合わせて動的に調整されるため、これを行うにはクリック可能なボックスも必要です。画像を含むボックスを作成しました (それが必要かどうかはわかりません)。そのコンテナー内にボックス (a.resume) を作成すると、画像に対して相対的に調整されると考えました。ただし、ボックスはコンテナの外側、画面外の右側に作成されているようです。

以下は CSS です。

#banner {
    width: 100%;
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

img.banner {
    max-width: 100%;
    height: auto;
    width: auto;
}

a.resume {
    top: 20%; 
    left: 35px; 
    width: 60%; 
    height: 28%;
    position: relative; 
    background-color: black; /* to see where my box is */
    display:block;
}

以下は HTML です。

<body>
<div id="banner">
    <img src="banner.png" class="banner" />
    <a href="banner1.png" class="resume" />
</div>
</body>

また、CSS や HTML を簡素化できるものがあれば教えていただければ幸いです。私はこれに慣れていないので、それらを複雑にしすぎているかもしれません。

4

1 に答える 1

2

HTML マップ タグを使用する必要があります。ここでそれについて学ぶことができます

于 2013-07-21T02:50:43.140 に答える