利用JS实现开灯关灯

最新推荐文章于 2024-08-14 18:56:01 发布

少年闰土01

最新推荐文章于 2024-08-14 18:56:01 发布

阅读量2.1k

点赞数 1

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/right_hou/article/details/86516355

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种使用JavaScript实现鼠标悬停时图片切换的方法。第一种方法通过预定义的函数改变图片源，第二种方法则通过传递当前图片元素来动态切换图片状态。这两种技术在网页设计中常见，用于创建交互式的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	方式一.<br>
  	<script>
  		function on(){ 			
  			var img = document.getElementById("light");  			
  			img.src="image/bulb_on.png";
  		}
  		function off(){
  			var img = document.getElementById("light");
  			img.src="image/bulb_off.png";  			
  		} 	
  	</script>
		<img id="light" onmouseover="on();" onmouseout="off();" 
				src="image/bulb_off.png" />    
	<hr/>
	方式二.<br>
 	<script>
  		function onLight(img){ 			
  			img.src="image/bulb_on.png";
  		}
  		function offLight(img){
  			img.src="image/bulb_off.png";  			
  		} 	
  	</script>
		<img onmouseover="onLight(this);" onmouseout="offLight(this);" 
				src="image/bulb_off.png" />   
	</script>

注意图片的路径