如何用JS实现简单的图片替换

JavaScript014

如何用JS实现简单的图片替换,第1张

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('img').attr('src', 'https://www.baidu.com/img/bd_logo1.png')。

3、浏览器运行index.html页面，此时网页上的所有图片都被替换成了指定的图片。

js版和css版自动按比例调整图片大小方法，分别如下：

<title>javascript图片大小处理函数</title>

<script language=Javascript>

var proMaxHeight = 150

var proMaxWidth = 110

function proDownImage(ImgD){

      var image=new Image()

      image.src=ImgD.src

      if(image.width>0 && image.height>0){

      var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height

    if(rate <= 1){   

     ImgD.width = image.width*rate

     ImgD.height =image.height*rate

    }

    else {

                          ImgD.width = image.width

                          ImgD.height =image.height

                  }

      }

}

</script>

</head>

<body>

<img src="999.jpg" border=0 width="150" height="110"  onload=proDownImage(this)   />

<img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this)   />

</body>

纯css的防止图片撑破页面的代码，图片会自动按比例缩小：

<style type="text/css">

.content-width {MARGIN: autoWIDTH: 600px}

.content-width img{MAX-WIDTH: 100%!importantHEIGHT: auto!importantwidth:expression(this.width > 600 ? "600px" : this.width)!important}

</style>

<div class="content-width">

  <p><img src="/down/js/images/12567247980.jpg"/></p>

  <p><img src="/down/js/images/12567247981.jpg"/></p>

</div>

Photoshop软件可以制作BMP图，方法步骤是：

1、打开ps软件，新建16*16像素的白色背景文件；

2、打开“文件--存储为“bmp格式文件，保存；

3、如果有现成的大像素图片，可以直接打开图片，拖进上述方法制作好的白色背景图片中，调整大小、位置，保存，bmp格式图片制作完成。