javascript - 图像的每个部分具有(或具有)不同的 id - jquery

Question

我有一个 ID 为 myimage 的图像。它的宽度为 300px，高度为 100px。每个 100px 宽的部分都有一个独特的颜色，如下所示

------------------------
| red  | green | blue  |
------------------------

是否可以使用具有不同 id 的每个部分(具有宽度和高度 100px)，以便图像可以用作每个部分具有不同功能的按钮？

仅在可能的情况下回答并为其他人评论。

提前致谢...:)

Answer 1

将您的图像设置为背景图像并赋予父 div position:relative 属性。然后使用带有 position:absolute 的嵌套 div，每个 100px。

<div id="wrap">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
</div>

#wrap{
    background:transparent url(...) no-repeat 0 0;
    width:300px;
    height:100px;
    position:relative;
}

.first, .second, .third{
    position:absolute;
    top:0;
    width:100px;
    height:100px;
}
.first{
    left:0;
}
.second{
    left:100px;
}
.third{
    left:200px;
}

现在使用 JQuery，您可以单独引用每个部分。

$('.first').click(function(){ // this is the first part
 alert('first clicked')
})

在 http://jsfiddle.net/PrMzr/ 查看工作示例