3

前景画像にイメージマップを設定する方法は知っていますが、今回は、divの背景画像として設定されている画像の一部にイメージマップを設定したいのですが、どうすればいいですか. web で解決策が見つかりませんでした。助けてください。たとえば、

ここに画像の説明を入力

html

<div class="header full" style="background:url('/hdr.jpg';?>) no-repeat; height:492px">

画像全体が背景画像として設定されていますが、Nestle楕円形の部分をクリックすると、いくつかの URL にリダイレクトされます。

4

3 に答える 3

3

次のコードを試して
ください画像を使用し、test.jpgとして名前を変更して ください。テストのためにすべてを同じフォルダーに置き、必要に応じてコードを変更してください (これは単なる例です)。

**CSS** (style.css)



.image{
   background: url("test.jpg") repeat scroll 0 0 transparent;
   height: 185px;
   width: 266px;
   border: 1px solid;
   }
    .link{
        padding-left: 26px;
        padding-top: 23px;
        position: absolute;
    }
    .link a{
      padding-left: 0;
      display: block;
      height: 48px;
      width: 67px;
    }
    .container{
    position: relative;
    }

HTML

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="link"> <a href="">&nbsp;</a></div>
<div class="image">
</div>
</div>
于 2013-03-04T11:49:37.473 に答える
0

説明付きの例を次に示します: http://quackit.com/html/tutorial/html_image_maps.cfm

于 2013-03-04T11:21:32.703 に答える
0

クリックするdivの要素がなくなったため、画像を背景として配置しても大丈夫です

画像マップ内のリンクに「長方形」形状のみが必要な場合は、代わりに css 定義のリンク位置を使用できます。これは、位置を指定し、背景色を透明に設定することによって実現されます。ここに例があります

于 2013-03-04T11:51:21.023 に答える