CSS背景图片onclick

时间:2012-03-12 13:48:32

标签: jquery css

#header{  
    height: 80px;
    padding-left: 208px;
    background-image: url("Trans.png"); 
    background-repeat: no-repeat;
} 
<div id="header">
<!--display something float to the right-->
</div>

如何绑定背景图像onclick事件?

$("#header").delegate(":image", "click", function() {
//this does not work
});

这两项都不起作用:(

$("#header:image").click(function() {}

TIA

6 个答案:

答案 0 :(得分:3)

由于图像显示为div的背景,因此在div上绑定事件:

$(document).delegate("#header", "click", function() {....});

另请注意,delegate已被on()处理程序取代。

$(document).on("click", "#header", function() {....});

答案 1 :(得分:2)

背景图像不是DOM中的元素 - 您无法将事件绑定到它。 你为什么要这样做?

如果您只想跟踪非重复背景上的点击次数 - 将您的事件绑定到标题,然后获取点击的x-y坐标进行数学运算。

或者 - 在内部添加另一个div,其背景的确切尺寸和位置,将事件(甚至图像)添加到该div。

答案 2 :(得分:0)

<div id="header" onclick="function()"></div>

答案 3 :(得分:0)

$("#header").click(function(){
        $('#header').css("background",":url('diff.jpg')");
});

应该有用。

答案 4 :(得分:0)

$("#header").click(function(){
    $(this).css("background-image","<url>");
});

答案 5 :(得分:-1)

$('img').click (function(event){
var image_link = $(this).data('img');
$("body").css("background-image","url('"+image_link+"')");});

很好

<img data-img="1.png" background-image:url("1.png")>