Onclick在窗體裏面的圖標

我想在窗體中添加一個圖標，並能夠點擊它並運行一次javascript代碼。基本上，我知道如何在窗體上添加圖標，但我不知道如何使用OnClick進行點擊。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命令以便僅使圖標可點擊。

來源

2011-10-23 drupal31

添加的onclick很容易：'<輸入的onclick = 「警報（1）」/>'。 –

是的，但在這種情況下，我只想要點擊圖標而不是整個文本字段。 – drupal31

使用'event.pageX'和'event.pageY'完成這個難題，請參閱https://developer.mozilla.org/en/DOM/Event/UIEvent/MouseEvent;或者在文本框上創建一個可點擊的圖層。 –

3種方式來做到這一點：

使用

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

與背景圖片和

$("#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>

來源

2011-10-23 12:09:59 cuzzea

Onclick在窗體裏面的圖標

回答

相關問題