"Brick"で画像を動的にマップする

Question

私がやっているのは、画像を動的にマッピングすることです。

私はもっと具体的にするつもりです！私がしたいことはどこそれぞれ、「レンガ」にここに画像を分割することである。..さんは、私は今、私はいくつかのニュースを保存した.xmlファイルをしたとしましょう。この画像

をしたとしましょう1つはニュースのリンクになります！レンガに分かれ

：だから、私はこのようなイメージを持っているでしょう！この例では、私は2つのニュースを.xmlファイルに入れているので、2つのレンガだけが「クリア」になり、残りのイメージは暗くなります。

私は15最大ニュースのようになりますので、画像は3x5または5x3で分割されますが、レンガのウィジットは動的である必要があります。これはウィンドウブラウザの幅に関係なく表示する必要があるからです。

私はJquery、CSSなどが必要なものを使用しています。

EDIT：私が今までに見つけた唯一の「簡単な」解決法は、それぞれ1つのブリックを「クリア」して15のイメージを作成することです。 Jqueryと透明なレンガだけのリンクを入れます。

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]); 
    } 
}); 

それはjqueryのを使用していますフィドルを見 - https://jsfiddle.net/h0meyf9p/4/