Thursday, March 28, 2024

HTML Goodies: Script Tip: Week 46

 

15% Tip…

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.


When the prompt appears, put in “angel.jpg”
(without the quotes)!

See it in Action


You may have noticed that after the prompt, I have placed four functions inside of one set of <SCRIPT LANGUAGE=”javascript”> and </SCRIPT> flags. That’s common. There’s no need to create a separate set of flags for each function. As long as they don’t share any variable names, you can just line them up one after the other.

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:

<FORM NAME=”calc”>

<TABLE border=”12″ cellspacing=”0″ cellpadding=”4″ bgcolor=”#fdf99d”>

<TR>

<TD align=”center”>Height:<BR>
<SCRIPT LANGUAGE=”javascript”>
document.write(“<B>”+high+”</B>”)
</SCRIPT>
</TD>

<TD align=”center”>Width:<BR>
<SCRIPT LANGUAGE=”javascript”>
document.write(“<B>”+wide+”</B>”)
</SCRIPT>
</TD>

<TD align=”center”>Enter New Height:<BR>
<INPUT TYPE=”text” SIZE=5 NAME=”h2″>
</TD>

<TD align=”center”>
<INPUT TYPE=”button”
VALUE=”Solve” onClick=”newW()”>
</TD>

<TD align=”center”>New Width Equals<BR>
<INPUT TYPE=”text” NAME=”width2″ SIZE=10>
</TD>

<TD align=”center”>
<INPUT TYPE=”button”
onClick=”newWin()” VALUE=”Let Me See It”>
</TD>

</TR>

</TABLE>

</FORM>

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:

<TD align=”center”>Height:<BR>
<SCRIPT LANGUAGE=”javascript”>
document.write(“<B>”+high+”</B>”)
</SCRIPT>
</TD>

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

Do YOU have a Script Tip you’d like to share? How about suggesting a Script Tip to write about? I’d love to hear it. Write me at: webmaster@htmlgoodies.com.


Learn to write your own JavaScripts with the

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured