小叶白龙 博客

网站开发时经常需要在某个页面需要实现对大量图片的浏览，如果考虑流量的话，大可以像pconline一样每个页面只显示一张图片，让用户每看一张图片就需要重新下载一下整个页面。不过，在web2.0时代，更多人愿意用javascript来实现一个图片浏览器，让用户无需等待过长的时间就能看到其他图片。

知道了一张图片的地址，需要把它在一个固定大小的html容器（可以是div等）里边显示出来，最重要的当然是需要知道这张即将显示的图片的宽和高，然后再结合容器的宽和高，按照一定的缩放比例使图片显示出来。因此，实现图片预加载就成为图片浏览器的核心功能了。

<script type="type/javascript">
function showOtherPic(obj){ 
obj.src='jz1024.jpg';

obj.onerror = null;

}
</script>
<img src="" onerror="showOtherPic(this)" />
 

在一些B/S结构的应用系统中，有很多页面是需要有水印的。常见的就是公文系统、合同系统等。大家常常关注的是网站图片增加水印，而很少关注页面水印。刚去Google了一圈，关于页面水印的文章的数量为几乎为0. 本文中，流牛木马就与大家一起交流一下有关制作网页水印的心得。

本文讨论以下的情形： 新增水印的方法需要用Javascript完成，并要求能够方便地加入到原有的页面中，不能影响到已有的功能。

<script language="javascript">

function pic_reset(drawImage,thumbs_size) {   

    var max = thumbs_size.split(',');   

    var fixwidth = max[0];   

    var fixheight = max[1];  

    w=drawImage.width;h=drawImage.height;   

    if(w>fixwidth) { drawImage.width=fixwidth;drawImage.height=h/(w/fixwidth);}   

    if(h>fixheight) { drawImage.height=fixheight;drawImage.width=w/(h/fixheight);}         

    drawImage.style.cursor= "pointer";   

    drawImage.onclick = function() { window.open(this.src);}    

    drawImage.title = "点击查看原始图片";  

}

var flag=false;

function DrawImage(ImgD,w,h){

var image=new Image();

image.src=ImgD.src;

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

flag=true;

if(image.width/image.height>= w/h){

    if(image.width>w){

      ImgD.width=w;

      ImgD.height=(image.height*w)/image.width;

    }else{

      ImgD.width=image.width;

      ImgD.height=image.height;

    }

}else{

    if(image.height>h){

      ImgD.height=h;

      ImgD.width=(image.width*h)/image.height;

    }else{

      ImgD.width=image.width;

      ImgD.height=image.height;

    }

}

}

}

</script>

 <script type="text/javascript"src="swfobject.js"></script>
 <script type="text/javascript">     
var flashvars = {}; flashvars.xml = "config.xml";
  var params = {};
  params.menu="false"; 
  params.wmode="opaque";
  //params.wmode= "transparent";
  params.bgcolor="#CCCCCC";
  params.allowfullscreen="true";
  var attributes = {};
  attributes.id="myFlash";
  attributes.name="myFlash";
  swfobject.embedSWF("img/cu3er.swf", "cu3er_swf", "994", "230", "9", "false",flashvars, params, attributes);
</script>
 

　　重新整理了一下页面的代码，终于通过了W3C的XHTML 1.0检测和CSS检测。而且XHTML用的还是Strict。不过可能有几篇文章里的标签不符合标准所以并不是所有页面合格。但是至少框架和首页都ok了。
　　几个需要注意的地方，基本上90%的错都来自这里：
　　1. 所有标签必须成对配套出现。就算是单个的，比如<br>，也必须写成<br />

有时我们在设计一些下拉框时，只要给用户显示，不需要用户选择，这就需要禁止这些选项的可选性，看下面实例：

<style text="text/css">
optgroup { background-color:#eee; color:444; }
</style>
 

ime-mode:disabled

很多人都不用这个css属性，测试了下其实挺好用的

( 省去了用户切换输入法的麻烦还规避了用户容易输错数字的错误 )

ime-mode

语法：

ime-mode : auto | active | inactive | disabled