Html 如何使图像功能成为按钮，并使其在单击时执行操作（启动关键帧事件、运行脚本）？

我刚开始在学校写代码，我们的老师很糟糕。我必须自学如何编码，因此，我来到这里寻求帮助：）。我已经用一些简单的html和css创建了这个网站，现在我想让我在导航栏中使用的图像充当按钮，按下时，做一些很酷的事情，比如制作动画，或者启动一个关键帧事件，我设置的一些关键帧将触发（比如闪烁文本），或者甚至可能运行一个很酷的javascript。这主要是为了表演，但同时，我在这里学习。如果我的代码写得不好，请随意更正。多谢各位

HTML

恐吓








~突发新闻~
26。2017年10月。
根据各种可靠消息来源，电子游戏《恶霸2》的发布刚刚得到确认。布尔沃思国际象棋俱乐部发言人巴德·安迪确认《霸王2》的发布日期为2019年1月1日。安迪在接受《布尔沃斯先驱报》所有者罗素·巴罗（Russel Barro）的采访时说：“恶霸期待已久的续集将在当今的电子游戏行业取得巨大成功。”~

18。2017年10月11时24分，不明身份的学生或人员发出火警。教职员工鼓励所有学生将有关事件的线索和提示发送至：Bullworthacademy@edu.com
~z~工作人员~

Bully 2“已由R*insider确认”
可信的gtaforum.com-admin“Yan2295”于4月21日发布帖子说：



~Russel Hustle~

CSS
@输入“指南针/css3”；
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
许可证：无（公共域）
*/
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
}
身体{
背景图片：url（“brun.jpeg”）；
背景重复：无重复；
背景尺寸：1270px；
背景附件：固定；
}
.柔性容器{
填充：0；
保证金：0；
宽度：1000px；
列表样式：无；
弯曲方向：立柱；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：中心；
}
.弹性项目{
背景色：rgba（0,0,0,0.25）；
边际上限：0px；
边缘底部：0px；
左边距：0；
边框顶部：0px实心；
左边框：3倍实心rgba（0,0,0,1）；
边框底部：0px实心；
右边框：3倍实心rgba（0,0,0,1）；
边界半径：0px；
填充底部：100px；
填充顶部：100px；
线高：40px；
颜色：rgba（25217426255）；
字体大小：粗体；
字号：26px；
字体系列：Narcissosopensg；
文本对齐：居中；
flex-grow:0；
证明内容：周围的空间；
动画名称：文本；
动画迭代次数：无限；
动画持续时间：2秒；
动画方向：交替；
}
@关键帧jtext{
从{
颜色：rgba（25217426255）；
}
到{
颜色：rgba（0,0,0,0.5）；
}
}
.导航{
列表样式：无；
边框顶部：3件纯黑；
边框底部：0px纯黑；
宽度：994px；
右边框：3倍纯黑；
左边框：3倍纯黑；
边缘顶部：5px；
边缘底部：0px；
文本对齐：居中；
对齐项目：居中；
填充：0；
边框左上半径：50px；
边框右上角半径：50px；
背景色：rgba（0,0,0,0.25）；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
字体系列：Narcissosopensg；
字号：28px；
}
.导航a{
文字装饰：无；
显示：块；
填充：0；
填充：1em；
不透明度：0.5；
过渡时间：0.5s；
颜色：rgba（25217426255）；
}
.导航a:悬停{
颜色
背景：；
不透明度：1；
动画持续时间：1.5s；
动画迭代次数：无限；
动画名称：闪烁；
动画方向：交替；
}
关键帧闪烁{
从{
不透明度：0.75；
}
到{
不透明度：0；
}
}
@介质和全部（最大宽度：800px）{
.导航{
证明内容：周围的空间；
}
}
@全部和全部介质（最大宽度：600px）{
.导航{
-webkit flex流：列换行；
柔性流：柱包裹；
}
.a{
文本对齐：居中；
填充：10px；
边框顶部：1px实心rgba（255255,0.3）；
边框底部：1px实心rgba（0,0,0,0.1）；
}
.导航li：a型的最后一个{
边界底部：0；
}

您可以在按钮内添加带有下方标签的图像按钮

<input type="image" src="http://somesite.com/somepath/someimage.png" />

或

---

您可以在按钮内添加带有下方标签的图像按钮

<input type="image" src="http://somesite.com/somepath/someimage.png" />

或

---

有几种方法可以做到这一点：

添加一个锚定标记，如下所示

在javascript中为id为的元素编写一个click函数

document.getElementById（“myId”）.onclick=function（）{/*这里有些代码*/}

---

有几种方法可以做到这一点：

添加一个锚定标记，如下所示

在javascript中为id为的元素编写一个click函数

document.getElementById（“myId”）.onclick=function（）{/*这里有些代码*/}

---

如果您的图像是正确的si

<button style="background: url(someimage.png)" ... />

<li><a  class="funImage" href="" target="_blank"></a></li>

.funImage{display: inline-block;
          background-image: url("bilde.png");
          height: /*Set height accordingly*/;
          width: /*Set width accordingly*/; 
         }

<img src="yan.png" alt="image" id="image">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript>
    $(document).ready(function(){
        $('#image').click(function(){ 
        alert('image clicked');
      });
    });
</script>