Javascript基础学习：利用javascript改变html中图片的显示

责任编辑：宏鹏来源：武汉北大青鸟鲁广校区时间：2013-12-25 10:19:47

导读：本文介绍如何Javascript基础知识点：利用javascript改变html中图片的显示，通过点击图片实现灯的开关来演示，让你可以非常直观的体验到javascript的应用效果。

通过javascript可以实现很多绚丽的网页效果，这里小编给大家介绍一个简单的利用javascript改变图片显示的案例，本文以点击图片中的电灯使其改变颜色来展示javascript的应用。

本例会动态地改变 HTML <image> 的来源 (src)：The Light bulb，点击灯泡就可以打开或关闭这盏灯。具体代码如下所示。

<!DOCTYPE html>

<html>

<body>

function changeImage()

{

element=document.getElementById('myimage')

if (element.src.match(“bulbon”))

{

element.src=“//www.w3school.com.cn/i/eg_bulboff.gif <//www.w3school.com.cn/i/eg_bulboff.gif> ”;

}

else

{

element.src=“//www.w3school.com.cn/i/eg_bulbon.gif <//www.w3school.com.cn/i/eg_bulbon.gif> ”;

}

</script>

<img id=“myimage”onclick=“changeImage()”

src=“//www.w3school.com.cn/i/eg_bulboff.gif <//www.w3school.com.cn/i/eg_bulboff.gif>”>

<p>点击灯泡来点亮或熄灭这盏灯</p>

</body>

</html>

以上案例就是通过监测鼠标在图片上的点击，让它实现在图片上点击一次就更改一次显示图片来时实现开灯光灯的效果。对以上效果感兴趣的同学可以复制代码自己运行体验下效果。更多关于网站制作的相关知识欢迎关注本站信息，若干你想通过培训学习或者提升自己的技能，欢迎致电或者质询在线老师。

看过该软件测试工程师的还看过

本文标题：Javascript基础学习：利用javascript改变html中图片的显示，责任编辑：宏鹏，来源：武汉北大青鸟鲁广校区栏目，于2013-12-25 10:19:47发布于北大青鸟鲁广校区。本文介绍如何Javascript基础知识点：利用javascript改变html中图片的显示，通过点击图片实现灯的开关来演示，让你可以非常直观的体验到javascript的应用效果。