JavaScript and auto-scaling Image Auto-scaling image multi-browser compatibility Methods Summary [original] _ image effects

Js and auto-scaling images multi-browser-compatible methods to summarize the auto-scaling effect of the original image recently. I found that the JavaScript code that has been used all the time could not work properly in firefox, page deformation. so I wrote a general compatibility code for you to discuss.
I used pjblog

The Code is as follows:

// Search for images with a large width in the webpage for scaling and PNG correction
Function ReImgSize (){
For (I = 0; I {
If (document. all ){
If (document. images [I]. width & gt; 550)
{
Document. images [I]. width = "550" // It is not high, which will obviously cause deformation of the image
Try {
Document. images [I]. outerHTML = ''+ document. images [I]. outerHTML +''
} Catch (e ){}
}
}
Else {
If (document. images [I]. width> 400 ){
// Neither width nor height makes firefox images larger
Document. images [I]. title = "open an image in a new window"
Document. images [I]. style. cursor = "pointer"
Document. images [I]. onclick = function (e) {window. open (this. src )}
}
}
}
}

The disadvantage of the very good code is that the large image in firefox will be deformed, and the image in the region cannot be controlled. If you want a large image, it will become a small image.
I wrote it myself,

The Code is as follows:

Function $ (objectId ){
If (document. getElementById & document. getElementById (objectId )){
// W3C DOM
Return document. getElementById (objectId );
}
Else if (document. all & document. all (objectId )){
// MSIE 4 DOM
Return document. all (objectId );
}
Else if (document. layers & document. layers [objectId]) {
// NN 4 DOM.. note: this won't find nested layers
Return document. layers [objectId];
}
Else {
Return false;
}
}
Function dxy_ReImgSize (){
Var box = $ ("dxy_content ");
Var imgall = box. getElementsByTagName ("img ")
For (I = 0; I {
If (imgall [I]. width & gt; 500)
{
Var oWidth = imgall [I]. width;
Var oHeight = imgall [I]. height;
Imgall [I]. width = "500 ";
Imgall [I]. height = oHeight * 500/oWidth;
}
}
}

We can also find that if a low browser does not support getElementsByTagName, you will not be able to play. The advantage is that you can control the area.
Finally, there is no way to solve this problem.

The Code is as follows:

Function ReImgSize (){
For (I = 0; I {
If (document. all ){
If (document. images [I]. width & gt; 500)
{
Var oWidth = document. images [I]. width;
Var oHeight = document. images [I]. height;
Document. images [I]. width = "500 ";
Document. images [I]. height = oHeight * 500/oWidth;
Document. images [I]. outerHTML = ''+ document. images [I]. outerHTML +''
}
}
Else {
If (document. images [I]. width> 500 ){
Var oWidth = document. images [I]. width;
Var oHeight = document. images [I]. height;
Document. images [I]. width = "500 ";
Document. images [I]. height = oHeight * 500/oWidth;
Document. images [I]. title = "opening an image in a new window ";
Document. images [I]. style. cursor = "pointer"
Document. images [I]. onclick = function (e) {window. open (this. src )}
}
}
}
}

Note that I added

The Code is as follows:

Var oWidth = document. images [I]. width;
Var oHeight = document. images [I]. height;
Document. images [I]. width = "500 ";
Document. images [I]. height = oHeight * 500/oWidth;

If you find any better method, post it.
Www.jb51.net script Home Original, reprinted please indicate the source