3

下にスローガンが入ったロゴの画像があります。ホームページのハイパーリンクとしてロゴが必要ですが、実際のロゴからのみクリック可能であり、その下のスローガンではありません。しかし、ロゴとスローガンが1つの画像の一部であるため、これを達成することはできません。

とにかく、2つの別々の画像を持っている以外にこれの周りにありますか？

HTML：

<a href="http://www.dalewoods.com" id="logo_link">
    <img src="images/logo.png" alt="Dale Woods" class="logo"/></a>

CSS：

img.logo {
margin-top: 20px;

}

4

5 に答える 5

6

<map>とを使用<area>して、画像上に画像マップを作成できます。この領域は、画像の一部のみをリンクするために使用できます。

ニーズに合わせて変更できる簡単な例を次に示します。

<map name="a">
  <area shape="rect" coords="25,25,75,75" href="http://www.dalewoods.com">
</map>
<img src="images/logo.png" alt="Dale Woods" class="logo" usemap="#a" />

この例では、長方形の領域で覆われているロゴの部分のみがリンクされます。

于 2012-11-09T15:20:37.417 に答える
1

はいあります。:)

<div id="logo">
  <a href="http://www.dalewoods.com" id="logo_link">Dale Woods</a>
</div>

そしてCSS：

#logo {
  width:200px;height:200px;position:relative;
  background:url(images/logo.png) no-repeat;overflow:hidden;
}
#logo_link {
  display:block;position:absolute;top:0;left:0;
  width:200px;height:150px;text-indent:-2000px;
}

位置と寸法を変更する必要がありますが、構造的にはこれで問題が解決するはずです。

于 2012-11-09T15:24:34.427 に答える
1

次に例を示します：http：//codepen.io/anon/pen/KEdrc

HTML：

<div class="logo">
  <a href="#"></a>
  <img src="image.png" alt="Logo">
</div>

CSS：

.logo { 
  display: inline-block;
  position: relative;
}

a { 
  position: absolute;
  left: 0; top: 0;
  height: 50%; width: 100%;
}

img { display: block; }
于 2012-11-09T15:35:41.497 に答える
0

私はこれを行う方法についてここで説明しようとしました..フィドルをチェックすると、それを行う方法のアイデアを得ることができます...

例

<img src="example.gif" width="145" height="126" alt="Example" usemap="#Example">

<map name="Example">
  <area shape="rect" coords="0,0,82,126" alt="Firsthalf" href="#">
</map>

</ p>

ここで、画像と前半はクリック可能で、後半はクリック可能ではないと考えてください。同じようにするか、フィドルで画像を提供してみてください。

于 2012-11-09T15:26:53.643 に答える
0

286x176ピクセルの画像があるので、これが私がそれを達成した方法であり、左半分はAndroidへのリンクであり、右半分はAppleへのリンクです。

<map name="logos">
    <area shape="rect" coords="0,0,143,176" href="http://www.android.com" title="Link to Android" alt="Link to Android">
    <area shape="rect" coords="143,0,286,176" href="http://www.ios.com" title="Link to Apple" alt="Link to Apple">
</map>
<img src="myimage.png" usemap="#logos">
于 2019-07-08T14:51:55.457 に答える