0

別の Web ページに移動するクリック可能なリンクを含む画像を含む Web ページを作成したいと考えています。画像全体をクリックできるようにしたくはありません。ほんの一部です。

私の質問はばかげているように聞こえるかもしれませんが、私は HTML の初心者です。皆さんが私を助けてくれることを願っています!

4

3 に答える 3

2

@programminginalallston が言ったように、イメージ マップを使用する必要があります。

イメージ マップを使用するには、タグusemapに属性を追加します。<img>

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

次に、タグを挿入し、タグ<map>を追加<area>してクリック可能な領域を定義します。

<map name="usethismap">
    <area shape="rect" coords="0, 0, 100, 100" alt="Area Description" href="otherpage.html">
</map>

MDN で詳細を読むことができます:

これが役立つことを願っています！

于 2013-08-08T17:52:42.853 に答える
0

これを実現する別の方法は、別の方法が必要な場合に限り、別の要素 (ボタン、div など) を画像の上に配置してクリック可能にすることです。たとえば、非表示の div (css:)opacity:0;を好きな場所に配置して、クリック可能にすることができます。

<head>jQuery を使用して要素 (div) をクリック可能にするため、そのページのタグにjQuery ライブラリへの参照を含める必要があります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

秘密は、img とクリック可能な div の両方を別の div 内に配置することです。外側の div は position:relative で、内側の div は position:absolute です。

#clickableDiv{
    position:absolute;
    top: 290px;
    left:85px;
    height: 20px;
    width: 30px;
    background-color:yellow;
    cursor:pointer;
}

imagemapと hidden div メソッドの両方を組み合わせたこの jsFiddle example を参照してください。

于 2013-08-08T18:56:45.440 に答える
-2

画像リンクの一部をどこかに作りたい場合は、画像マップを使用してください。

于 2013-08-08T17:43:16.497 に答える