图像的每个部分都具有（或具有）不同的id-jquery

Question

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

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

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

只有在可能的情况下回答并为他人发表评论。

提前感谢... :)

Answer 1

将图像设置为背景图像，并提供父div position:relative属性。然后使用嵌套的div与position:absolute每个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/

处的工作示例