Question

我想在表单中添加一个图标，并且能够点击它并在点击后运行javascript代码。基本上，我知道如何在表单上添加图标但我不知道如何使用OnClick使其可点击

文本字段的输入代码是 HTML代码：

<input id="cool"
   style=" width:45%; padding:4px; padding-right:25px;" type="text" name="game">

和图标的css代码

CSS代码：

#cool {
    background: url(game.jpg) no-repeat scroll 448px -1px;
    cursor:hand;
    cursor:pointer;
}

但我不知道，因为我说我应该放置OnClick命令，以便只使图标可点击。

Answer 1

3种方法：

使用

<input type='text' id='input'>

带有bg图像和

$("#input").click(function(e){if(e.pageX > start_x && e.pageX < end_x && e.pageY > start_y && e.pageY < end_y){
    // open new page
}});

使用此：

<div style='position:relative'>
        <input />
        <div style='width:20px;height:20px;position:absolute;top:0;left:0' onclick="//js code to open page"></div>
</div>

使用此代码：

<div>
        <div class='left'></div>
        <div class='right'><input /></div>
</div>
<style>
        .left{float:left;width:25px;height:25px;background-image:url(the_image.png)}
        .right{float:left;width:200px;height:25px;}
</style>

单击表单内的图标

1 个答案: