如何在css中更改img的src

html-css06

如何在css中更改img的src,第1张

<html>

<head>

<style>

img{

text:expression(src="b.png")

}

</style>

<body>

<img src="a.jpg">

</body>

</head>

</html>

css改src图只有ie支持 或者css控制背景图background-image好些

一般都是js

document.getElementById("imgid").src = "b.png"

你可以使用jq来改变,,

css:

<style>

.div{

background:url("test.jpg") no-repeat

border:solid 1px red

height:200px

}

</style>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script language="javascript">

$(document).ready(function(){

$(".div").click(function(){          //写了点击测试效果

$(this).css({

"background" : "url('menu.jpg') no-repeat",

"borderColor" : "blue"

})

})

})

</script>

html:

<div class="div" onclick="changeBg(this)"></div>

测试:

初始

点击后

js:

--------------------------------------------------------------- 

function changeBg(obj){ 

    obj.style.backgroundImage="url(menu.jpg)"             //都是使用驼峰写法~~~

---------------------------------------------------------------

1、新建一个html文件,命名为test.html,用于讲解。

2、在test.html文件内,创建一个div模块,并设置其class属性为mydiv。

3、在div模块内,使用img图片标签创建两张图片,src属性指向不同的图片路径。

4、在css标签内,使用“*”初始化页面所有元素的css样式,设置内边距为0,外边距为0。

5、在css标签内,设置div的样式,设置其宽度为700px,高度为400px,边框为1px,居中对齐。

6、在css标签内,设置图片的的大小,宽度为280px,高度为200px,为了使用图片水平排列,需要使用float属性设置图片浮动的统一方向,例如,这里设置统一浮动向左。

7、在浏览器打开test.html文件,查看图片水平排列的效果。