如何动态载入一个图片，并设置大小？

荒野狐狸

有一个图片容器( <img id="showBox">)和一组图片,鼠标移动到某一图片上时，图片容器加载该图片。如果宽度大于400则等于400,高度大于300则等于300.
例如：
原始图片为500*200,则显示在容器里为400*200
原始图片为200*500,则显示在容器里为200*300
原始图片为100×100(高、宽都没有超过，按原大小显示)



<img id="showBox" />

<img id="img1" src="1.jpg" onmouseover="ShowImage()" />
<img id="img2" src="2.jpg" onmouseover="ShowImage()" />
<img id="img3" src="3.jpg" onmouseover="ShowImage()" />

function ShowImage()
{
    //...
}

achun.shx

原帖由 荒野狐狸 于 2008-4-7 19:37 发表
有一个图片容器( )和一组图片,鼠标移动到某一图片上时，图片容器加载该图片。如果宽度大于400则等于400,高度大于300则等于300.
例如：
原始图片为500*200,则显示在容器里为400*200
原始图片为200*500,则显 ...

1. 
   
2.     function toSize(elm,options){
   
3.       var jelm=$(elm),w=jelm.width(),h=jelm.height(),width,height;
   
4.       /*原来没有这一段,我实例写个伪代码，你自己可以改改*/
   
5.       if(!options){
   
6.          options.max.width=(w==500)?400:xxxxxxx;
   
7.          options.max.height=(h==500)?300:xxxxxxx;
   
8.       }
   
9.       /********/
   
10.       if(options.max){
    
11.         options.max.width = options.max.width || w;
    
12.         options.max.height= options.max.height || h;
    
13.         width = options.max.width<w ? options.max.width : w;
    
14.         height = options.max.height<h ? options.max.height : h;
    
15.       }
    
16.       if(options.min){
    
17.         options.min.width = options.min.width || w;
    
18.         options.min.height= options.min.height || h;
    
19.         width = options.min.width > w ? options.min.width : w;
    
20.         height = options.min.height > h ? options.min.height : h;
    
21.       }
    
22.       height = Math.round(width * h / w);
    
23.       jelm.css({width:width + 'px',height:height+'px'});
    
24.     }
    

复制代码

以前自己写的,使用了jQuery,不过改成基本的javascript也很容易对于你的应用类似使用 onXXXXX="toSize(this);"

[ 本帖最后由 achun.shx 于 2008-4-8 00:28 编辑 ]

cayleung

function ShowImage()
{
var obj=event.srcElement;
document.getElementById("showBox").src=obj.src;
}
至于图片大小问题，设置个
<img id="showBox" style="max-height:300px; max-width:400px;" />