HTML點擊圖片變色代碼
<html> <head> <style> /*鼠標移上去的效果*/ img:hover { border: red solid 1px; opacity: 0.5; } </style> <script> /*點擊圖片改變顏色的函數*/ function changeColor(element) { element.style.filter = "grayscale(100%)"; } </script> </head> <body> <img src="example.jpg" onclick="changeColor(this)"> </body> </html>
解釋
代碼的第一部分是CSS樣式。當鼠標移上圖片時,圖片將會產生紅色邊框并變得有點透明。第二部分是JavaScript代碼,在這里定義了一個名為"changeColor"的函數,它在被調用時將使圖片變成灰色。在HTML代碼中,我們將這個函數作為"onclick"事件的處理程序附加到圖片上,這意味著當用戶點擊圖片時,將會觸發這個函數。