Нажмите на значок внутри формы

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 способа сделать это:

1. с помощью

   <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
   }});
   

2. используя это:

   <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>
   

3. используя этот код:

   <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>