在 "Brick" 中动态映射图像

Question

我想做的是动态映射图像..

我会举个例子更具体一点！假设我有这张图片

现在，假设我有一个 .xml 文件，我在其中保存了一些新闻。我想要的是将这里的图像分成 "brick"，其中每个都是 link求新闻！所以，我会有这样的图像：

分砖！在这个例子中，因为我在 .xml 文件中只有 2 条新闻，所以只有两块砖是 "clear"，图像的其余部分会更暗。

我最多有 15 个新闻，所以图像将被分成 3x5 或 5x3，但是砖块的宽度应该是动态的，因为无论 window 浏览器的宽度如何，它都应该显示。

我愿意使用 Jquery、CSS 以及任何需要的东西！

编辑：目前我找到的唯一 "easy" 解决方案是我创建了 15 张图像，在每张图像中我都会多一块砖 "clear".. 然后我会通过 Jquery 加载正确的图像并仅将 link 用于透明砖块。

Answer 1

<div id='image'>
  <div class='row'>
    <div class='cell empty' data-id='1'></div>
    <div class='cell empty' data-id='2'></div>
    <div class='cell empty' data-id='3'></div>
  </div>
  <div class='row'>
    <div class='cell empty' data-id='4'></div>
    <div class='cell empty' data-id='5'></div>
    <div class='cell empty' data-id='6'></div>
  </div>
  <div class='row'>
    <div class='cell empty' data-id='7'></div>
    <div class='cell empty' data-id='8'></div>
    <div class='cell empty' data-id='9'></div>
  </div>
</div>
#image
{
  background-image:url(https://ramiteks.lv/atteli/kontakti/vecpiebalga/400/IMG_0142.JPG);
  width:400px;
  height:265px;
}
.row
{
  width:100%;
  height:33.3%;
}
.cell
{
  width:33.3%;
  height:100%;
  float:left;
}
.empty
{
  background:rgba(0,0,0,0.7);
}

var array_from_xml = Array('a','b','c','d');
$(document).ready(function(){
  for(var i=0;i<array_from_xml.length;i++)
  {
    $('.cell[data-id='+(i+1)+']').removeClass('empty');
    $('.cell[data-id='+(i+1)+']').html(array_from_xml[i]);
  }
});

看看fiddle它用了jquery - https://jsfiddle.net/h0meyf9p/4/

在 "Brick" 中动态映射图像

Dynamically Map an Image in "Brick"

html

mapping

jquery

image