HTML Goodies: Script Tip: Week 46
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
Now we have the image from the prompt. Next we need to grab the image's height and width without any input from the viewer. Then we need to display it. First, refresh yourself on the script and its workings.
(without the quotes)!
In this Script Tip, I am concerned with the first two lines, before the functions begin lining up:
var high = document.thepic.height;
var wide = document.thepic.width;
Each line assigns a variable name to a dimension of the image. The variable "high" is produced from the hierarchy statement: document.thepic.height.
See "thepic"? That's the name of the image space. That name was put into the image flag created from the prompt code. That way these lines of code understand that the height returned should be from that image space.
The same format is followed to get the width. So, now we have "high" and "wide" representing the image's height and width. We want to post that in the table that appears below the image:
<TABLE border="12" cellspacing="0" cellpadding="4" bgcolor="#fdf99d">
<TD align="center">Enter New Height:<BR>
<INPUT TYPE="text" SIZE=5 NAME="h2">
<TD align="center">New Width Equals<BR>
<INPUT TYPE="text" NAME="width2" SIZE=10>
onClick="newWin()" VALUE="Let Me See It">
What you see above is the first table. This is the one that allows you to enter a new height and get the new width.
This is a table, but it also uses FORM elements so that text can be entered by the user, so we need to get a handle on the FORM NAMEs.
The FORM itself is called "calc." The first text box, the one that will accept the new height, is named "h2." The second text box, the one that will display the new width, is named "width2." Those two text boxes can now be given attention through hierarchy statements like document.calc.width2.value.
There are also two buttons. The first will fire a function called newW(). That will create the new width value. The second will trigger a function called newWin() which will produce the new window showing the image with the new dimensions.
I am interested in the displays, first off. Here's the first table cell that displays the image height:
Notice I used an entire Script format to get the job done. This is common. It adds up to a bit of text, but you get the display you need. I made the return from "+high+" bold just for display purposes. The format is followed again to display the width in the next table cell.
In order to perform any calculations, we're going to need three numbers: The "old" height and width (we already have that), a new height or width from the user (you can see the box that will receive that value), and a function that will do the math for us. In this case, that function is called newW(). We'll get to that next week.
Next Week: New Width