Show | page you know, rich and colorful web pages can not be separated from the support of the picture, the image on the one hand increased the vividness of the Web page, on the other hand increased the size of the Web page, so download speed slowed down. How to make a picture appear on the page in the right size is a mystery I can't solve.
Not long ago, I developed a teaching and research site for the unit, the use of news management system, the first page on the news column, you need to call from the database picture files as pictures in the news, thus forming a text wrap form. As the whole system includes news uploading, news editing, system announcements and so on are dynamically realized. In the process of development, I took into account the following factors: (1) as a website maintainer, the operation of the computer is not very skilled, (2) the site pay attention to reasonable layout, content enrichment. Therefore, for the needs of the design, the site page, picture news on the picture width, height has certain requirements, this site can not be more than 200px width, although I understand that we could use Photoshop and other image processing software, can be processed in advance to the image, and then uploaded to the server, To achieve the same effect as the first page call, but as a user, the most hope is the simpler the operation the better, so I resolved to break the problem. After a few days of fierce fighting, I continue to find ways to solve the problem, continuous testing until successful. At this point, I put some of my own experience, written for the vast number of scripting writers for reference, so as to encourage.
The question of whether the picture can be displayed in the right size is a matter of narrowing the proportions of a large picture. Of course, small pictures can not be magnified in the Web page display, otherwise there will be image distortion phenomenon. How to get the image by the image of the URL size (width,height) is the key to the problem, I went to the Internet to search whether the use of JavaScript to write graphics, such as scaling, kungfu is not negative, and finally found the "Adaptive Picture size pop-up window" a text, the page effect, Click the text hyperlink, the page pops up a new window, showing the picture, where the form size and picture size, the article with Javascript:image () object dynamic loading picture, get the height and width of the picture, and then according to the source picture height, Width sets the height and width of the pop-up window sets the height and width of the pop-up window, and opens the window with the main code as follows:
Test One:
<meta Http-equiv=content-type content=text/html; Charset=gb2312>
<meta name=generator Content=microsoft FrontPage 4.0>
<meta Name=progid content=frontpage.editor.document>
<title>test</title>
<body>
<script Language=javascript type=text/javascript>
<!--
var imgobj;
function Checkimg (theurl,winname) {
Whether the object has been created
if (typeof (imgobj) = = object) {
Whether the height and width of the image have been achieved
if ((imgobj.width!= 0) && (imgobj.height!= 0))
Sets the height and width of the pop-up window according to the height and width of the image obtained, and opens the window
Where the increments 20 and 30 are the amount of space between the window border and the picture
Openfullsizewindow (Theurl,winname, width= + (imgobj.width+20) +, height= + (imgobj.height+30));
Else
Because it is not possible to immediately get the width and height of the picture by dynamically loading the picture through the Image object, the check is repeated every 100 milliseconds
settimeout (checkimg (' + theURL + ', ' + Winname + '), 100)
}
}
function Openfullsizewindow (theurl,winname,features) {
var anewwin, Sbasecmd;
Pop-up window appearance parameters
Sbasecmd = Toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,;
Whether the call came from checkimg
if (features = NULL | | features = =) {
Creating an Image Object
Imgobj = new Image ();
Set Image source
IMGOBJ.SRC = theURL;
Start getting image size
Checkimg (theURL, Winname)
}
else{
Open a Window
Anewwin = window.open (theurl,winname, Sbasecmd + features);
Focus window
Anewwin.focus ();
}
}
-->
</script>
<a href=http://www.webjx.com/htmldata/2005-11-19/bt0085.jpg Onclick=openfullsizewindow (this.href, ', '); return false> picture Test </a>
</body>
With the image () object to get the width of the image, Height, I know how to solve the problem of how to achieve the proportional scaling of the image. So, I use k=width/height to represent the proportional value of the image, when K>=1, said Width>heght, as long as the Width does not exceed 200px, then the height must be <=200px; the opposite k< 1, as long as the height does not exceed 150px,width must be <=150px (under normal circumstances width/height=4:3). So as long as k>=1 limit width,k<1 limit the height can be. With the help of the test one, I soon had the following code (Test II):
Test Two
<script Language=javascript type=text/javascript>
<!--
var imgobj;
function Checkimg (theURL) {
var width,height;
var k;
Imgobj = new Image ();
IMGOBJ.SRC = theURL;
if (typeof (imgobj) = = object) {
if ((imgobj.width!= 0) && (imgobj.height!= 0))
{width=imgobj.width;
Height=imgobj.height;
K=width/height;
document.write (k);
if (k>=1) {
if (width>=200) {
width=200;
height=width/k;
}}
Else
{if (height>=200) {
height=200;
Width=k*height;
}
}
Showimg (Theurl,width,height);
}
Else
settimeout (checkimg (' + theURL + '), 100)
}
}
function Showimg (theurl,x,y)
{
document.write ();
}
-->
</script>
<script language=javascript>
Checkimg (http://www.webjx.com/htmldata/2005-11-19/Bt0085.jpg);
</script>
Test passed! I am ecstatic, immediately to the code into the first file (Default.asp), and then through the server test, the results when I entered the Web site, the browser has been processed after the picture, suddenly I was dumbfounded, obviously I run the first file, the results appear in the picture. In addition, I found the browser toolbar "back" tool available, I click "Back", this time the first page content. Test again, the results show that it is normal. After repeated tests, I found that the same behavior occurs every time the picture is updated, and the same problem occurs when I open a computer that does not have access to the site. I'm getting confused and baffled. Why did this happen? I think a lot of scenarios, the results of the test failed.
Feeling nasty, I went to the Internet to check the characteristics of image (), mainly used to achieve rollover effect, you can download the picture in advance to the client, so that the switch between the pictures no time delay. Like the following code, use the SRC attribute of the Image object to specify the path (URL) of the picture, which downloads the picture pic2.gif in the images directory to the client:
var myimg = new Image ();
MYIMG.SRC = Pic.gif;
This code will force the browser to start downloading the specified picture from the server, if the client's cache has this image, the browser will automatically overwrite it, so that when the user moves the mouse to the top of the picture, the picture will immediately change, there will be no time delay. So if the first time the picture is displayed, the second time it will be able to display the first page file is the reason. From this, I conclude that the image cannot be obtained by using the image () object. This conclusion should change the solution to the problem.
I looked through a lot of JavaScript books, and there was a book that wrote "The Beat of the graph", which reads: "The element of a page can define its display range, which is the height and width of the graph." When handling an event trigger, dynamically changing the two properties of the diagram to achieve the effect; as prompted, I quickly completed the code for test Three, the main code:
Test Three
<script>
Function Show ()
{var w,h;
var k;
var con;
W=smallslot.width;
H=smallslot.height;
k=w/h;
if (k>=1) {
if (w>=200) {
w=200;
h=w/k;
}}
Else
{if (h>=150) {
h=150;
W=k*h;
}
}
Return w;
}
</script>
<script languge=javascript>
var x=show ();
document.write (x);
</script>
In this code, I consider using the ID in , you can define the width and height of the graph, as long as you can control the width of the image, you can implement the proportional display in the Web preview (height varies with width), so I will handle the image width as the return value of the show () function. Use the OnLoad event to call the width of the image in . I test again, through! Again transplanted to the first page code, test again, this time the problem arises: the first picture on the news in the picture actually did not show. I click the "Go" button in the address bar and the picture is displayed correctly. Practice tells me to fail again! Because the Internet users are only accustomed to do is to enter the URL, type enter the two action.
On this basis, I made the following attempts:
(1),
(2), window.location.reload () reload the page, but the result is always in the loading page process, so that the page can not be displayed correctly.
(3), 200) this.width=200; Align=left>, the test can pass, but if the image width
I am a little at the end of the feeling, can not find a better way to solve this problem, gradually lost confidence, for this problem I have two nights did not sleep, I prepare for the last one. I analyzed my test three, and I found the main reason is the OnLoad event is the event that is triggered when the page is loaded. OnLoad used in elements, when IE explained here, need to load the page to trigger "JAVASCRIPT:WIDTH=X;"
Therefore, to reload the page to display the picture. In addition, I know that the onload () is generally used in the <Body> element to advance the event that is triggered when the page is loaded. So, I put the onload () event into <Body>, the code is as follows:
Test four:
<body onload=window.smallslot.width=show (); >
<script>
Function Show ()
{var w,h;
var k;
var con;
W=smallslot.width;
H=smallslot.height;
k=w/h;
if (k>=1) {
if (w>=200) {
w=200;
h=w/k;
}}
Else
{if (h>=150) {
h=150;
W=k*h;
}
}
Return w;
}
</script>
this is a test!
Test again, pass it! and Home Call Success! I did it!
