图片的src使用方法

最新推荐文章于 2023-08-07 23:01:08 发布

恼火的昵称

最新推荐文章于 2023-08-07 23:01:08 发布

阅读量2k

点赞数

分类专栏： Javascript 文章标签： xhtml javascript class html bt function

本文链接：https://blog.csdn.net/chenglidian/article/details/6621182

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

利用图片的“name”属性控制图片的调换，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" >
<!--
function aa(bt_pic) {
 img_name.src=bt_pic;
}
//-->
</script>
</head>
<body>
	<div class="box" >
 		<a href="javascript:"> <img src="http://www.w3school.com.cn/i/eg_mouse2.jpg" name="img_name" οnmοusemοve="aa('http://www.w3school.com.cn/i/eg_mouse.jpg')" οnmοuseοut="aa('http://www.w3school.com.cn/i/eg_mouse2.jpg')"/> </a>
	</div>
</body>
</html>

如果不想使用上面图片的“name”属性，即可用document.getElementById("id_name")来获取，实例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" >
<!--
function aa1() {

   document.getElementById("my_img").src="http://www.w3school.com.cn/i/eg_mouse.jpg";
}

function aa2(){
   document.getElementById("my_img").src="http://www.w3school.com.cn/i/eg_mouse2.jpg";
}

//-->
</script>
</head>
<body>
	<div class="box" >
 		<a href="javascript:"> <img id="my_img" src="http://www.w3school.com.cn/i/eg_mouse2.jpg" name="img_name" οnmοusemοve="aa1( )" οnmοuseοut="aa2( )"/> </a>
	</div>
</body>
</html>

以上代码可以精简成如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" >
<!--
function aa(a) {

   document.getElementById("my_img").src=a;
}
//-->
</script>
</head>
<body>
	<div class="box" >
 		<a href="javascript:"> <img id="my_img" src="http://www.w3school.com.cn/i/eg_mouse2.jpg" name="img_name" οnmοusemοve="aa('http://www.w3school.com.cn/i/eg_mouse.jpg')" οnmοuseοut="aa('http://www.w3school.com.cn/i/eg_mouse2.jpg')"/> </a>
	</div>
</body>
</html>