JQuery指定区域的单击事件

我想实现的是点击右边的图片时搜索，怎么在那个背景图片上写单击事件代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Search..</title>
    <style type="text/css">
        .input
        {
            padding-top: 2px;
            height: 16px;
            width: 180px;
            border: 1px solid #0086C6;
            font-size: 14px;
            background: #fff url(http://www.webdm.cn/images/20110305/search_btn.gif) no-repeat right 0;
        }
        .label
        {
            color: #ccc;
            position: absolute;
            left: 12px;
            top: 6px;
            display: block;
            height: 22px;
            line-height: 22px;
            font-size: 12px;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(function () {
            $("#keyword").focus(function () {
                $("#for-keyword").css('display', 'none');
                $("#keyword").css('background-position', 'right -17px');
            })
            $("#keyword").blur(function () {
                if ($("#keyword").val() == "") {
                    $("#for-keyword").css('display', 'block');
                }
                $(this).css('background-position', 'right 0');
            })
        });  
    </script>
</head>
<body>
    <input name="keyword" type="text" class="input" id="keyword" value="" style="float: left;" />
    <label for="keyword" id="for-keyword" class="label">
        Search..</label>
</body>
</html>

解决方案 »

  1.   

    用map吧
    http://www.w3school.com.cn/tiy/t.asp?f=html_areamap如果是背景图片的话
    放个元素（透明的即可）放在这个背景图片的上面又或者 你直接给body.click赋事件，然后你看这个事件的鼠标点击的坐标是否在你的这个图片上（这点上，W3C和IE是不一样的属性）
      

  2.   

    我觉得应该加个img吧。
    然后$("#id").click
      

  3.   

    右边再放一个img，用透明的gif，margin-left:-20px; 然后做点击。。
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Search..</title>
        <style type="text/css">
            .input
            {
                padding-top: 2px;
                height: 16px;
                width: 180px;
                border: 1px solid #0086C6;
                font-size: 14px;
                background: #fff url(http://www.webdm.cn/images/20110305/search_btn.gif) no-repeat right 0;
            }
            .label
            {
                color: #ccc;
                position: absolute;
                left: 12px;
                top: 6px;
                display: block;
                height: 22px;
                line-height: 22px;
                font-size: 12px;
            }
        </style>
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" language="javascript">
            $(function () {
                $("#keyword").focus(function () {
                    $("#for-keyword").css('display', 'none');
                    $("#keyword").css('background-position', 'right -17px');
                })
                $("#keyword").blur(function () {
                    if ($("#keyword").val() == "") {
                        $("#for-keyword").css('display', 'block');
                    }
                    $(this).css('background-position', 'right 0');
                })
            });  
        </script>
    </head>
    <body>
        <input name="keyword" type="text" class="input" id="keyword" value="" style="float: left;" />
        <label for="keyword" id="for-keyword" class="label">
            Search..</label>
    <div id = "search" onclick = "alert('now search!!!');" style="width:20px;height:20px;position:absolute;left:170px;height:20px;z-index:100;cursor:pointer;"></div>
    </body>
    </html>
      

  5.   

    激发不了透明gif的单击事件啊