如何将一张图片分成不同的 link

Question

我在网站上有一张 30（宽）px、130（高）px 的图片。我想从这一张图片创建 4 个不同的 link。例如，我想为一个 link 创建 0 到 32px 的部分，为另一个 link 创建 33px 到 65px 的部分，就像这样。是否可以使用来自 jquery、css 或任何想法？

Answer 1

您可以使用地图。这是一个 example:

<map name="bigthings" id="bigthings">
  <area shape="rect" coords="35,4,205,108"
      href="http://en.wikipedia.org/wiki/Australia's_Big_Things"
      alt="Australia's Big Things (on Wikipedia)"/>
  <area shape="rect" coords="136,163,255,230"
      href="http://vwkombi.com/"
      alt="The VW Kombi, another Aussie icon"/>
</map>
⋮
<p><img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina"
usemap="#bigthings"/></p>

Answer 2

只需将您的图片作为容器的背景，并在其上放置 <a> 个元素：

#container {
    width: 300px;
    height: 85px;
    background: url('http://blog.whosebug.com/wp-content/uploads/Whosebug-logo-300.png') no-repeat;
}

#part1, #part2, #part3 {
    display: table-cell;
    width: 100px;
    height: 85px;
}

html:

<div id="container">
    <a id="part1" href="http://whosebug.com/" />
    <a id="part2" href="http://stackexchange.com" />
    <a id="part3" href="http://github.com"/>
</div>

http://jsfiddle.net/e2epotyg/1/

Answer 3

尝试

$(function() {
  var img = $("img")
  , parts = img.height() / 4
  , links = ["a", "b", "c", "d"]
  , regions = $.makeArray(Array(img.height()))
    .map(function(section, key) {
      return key + 1
    })
  , sections = [];

  links.forEach(function(value, key) {
    sections.push(regions.splice(0, Math.floor(Math.round(parts))))
  })

  $("img").on("click", function(e) {
    var res = $.map(sections, function(value, key) {
      return $.inArray(e.clientY, value) !== -1 ? key : null
    })[0];
    console.log("section: " + links[res])
  });
});

img {
  background: sienna;
  width: 30px;
  height: 130px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<img src="" />

如何将一张图片分成不同的 link

How to divide one single image into different link

css

jquery

image

web