jQuery - 在图像上创建网格

Question

我正在尝试创建一个＆＃34;网格＆＃34;在图像上，每个正方形/网格都是可点击的（是一个链接）。

目前，我所拥有的是：

<div style="background:url('/images/gridimg/progrid08.jpg') no-repeat #E9E9E9;width:601px;height:400px;margin:0 auto;border-left:1px solid #3d5a7f;border-top:1px solid #3d5a7f;" id="drawTable"></div>

function drawTable(){
var x = 30;
var y = 20;
var t = '<table cellspacing="0" cellpadding="0" class="grxd">';
    for(var i=1;i<=(x*y);i++){
        t += (i==1 ? '<tr>' : '');
        t += '<td style="cursor:pointer;"></td>';
        if(i==(x*y)){
            t += '</tr>';
        } else {
            t += (i%30===0 ? '</tr><tr>' : '');
        }

    }
    t += '</table>';
$("#drawTable").html(t);
}

虽然上面的脚本没有制作任何网格。它应该使它成为一个网格。

任何人都可以帮助我朝正确的方向发展吗？

这就是我想要实现的目标：

Answer 1

您的Javascript代码对我来说没问题。我认为这个问题可能与你的桌子造型有关。我为你准备了一个小提琴 - 请看最后一个链接。

<div id="drawTable" style="background:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQiX43nTAcsgpYUlK0MarurfXV_Hx2w53BonmYbKJUNyO4GJ35Q');width:275px; height:183px"></div>

你的功能（未使用）：

function drawTable() {
var x = 30;
var y = 20;
var t = '<table cellspacing="0" border="1" cellpadding="0" class="grxd">';
for (var i = 1; i <= (x * y); i++) {
    t += (i == 1 ? '<tr>' : '');
    t += '<td style="cursor:pointer;"></td>';
    if (i == (x * y)) {
        t += '</tr>';
    } else {
        t += (i % 30 === 0 ? '</tr><tr>' : '');
    }

}
t += '</table>';
$("#drawTable").html(t);

}

这是我添加的CSS：

table>td {
    border: 1px solid #dfdfdf;
    padding:0;
    margin:0;
}
table.grxd {
    width:100%;
    height:100%;
}

见这里：http://jsfiddle.net/93cyX/1/

Answer 2

获取图像的宽度和高度，并根据此创建表格。在此之后将图像作为表格的背景。

Answer 3

这绝对不是最好的方法，甚至是快速和肮脏的，但我希望它能让您了解如何解决您的问题：http://jsfiddle.net/fJRFK/15/

一般的想法是用div块样式的链接填充div，并用它们的id识别它们。

<div class="image-holder" id="img-1" style="background:url('http://subtlepatterns.com/patterns/stardust.png');">

</div>

$gridsize = 10;

$(".image-holder").each(function() {
    $linkheight = ($(this).innerHeight() / $gridsize) - 1;
    $linkwidth = ($(this).innerWidth() / $gridsize) - 1;

    for($i = 0; $i < $gridsize * $gridsize; $i++) {
        $currentId = $(this).attr('id') + '-' + $i;

        $(this).append('<a href="test.html" class="grid-link" style="height:' +         $linkheight + 'px;width:' + $linkwidth + 'px;" id="' + $currentId + '"></a>');
    }
});