HTML Goodies: Script Tip: Week 48

By Joe Burns

 

Take a Tip...

All the elements are in place. We have the original image height and width and the image's new height and width. Now all that is left is to display it. Here's the script and its effect once again.


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

See It In Action


Here's the Code

(It's big. Get it all.)


In the two table codes, the last button is used to pop up the new window to display the image with the new height and width. Just as with the two functions that performed the number calculations, these two display functions are very similar. I'll walk you through the first and quickly show you the changes in the second.

Here's the first display function. It's named
openWin():

function newWin()

{
var OpenWindow=window.open("", "newwin", "height=500,width=500");
OpenWindow.document.write("<HTML>")
OpenWindow.document.write("<TITLE>Image</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR='000000'>")
OpenWindow.document.write("<CENTER>")
OpenWindow.document.write("<IMG SRC=" +path+ " HEIGHT=" +c+ " WIDTH=" +d+ ">")
OpenWindow.document.write("</CENTER>")
OpenWindow.document.write("</HTML>")
}


Due to width concerns, a couple of the lines have been truncated. Please be aware that each line starts with OpenWindow.document.write and all that comes before the next should go on one line.

You should immediately notice that this is the basic format for opening a new window using a function. The window opens through the window.open, object.method format.

The effect is achieved by assigning the variable "OpenWindow" to the new window. Notice the empty quotes just inside the parentheses. That forces the script to look to itself for what will appear in the new window.

Next, the name "newwin" is assigned to the new window. It will never come into play in this script, but format requires you to have it.

Then we offer the height and width of the new window. I thought about setting up the script so that the height and width would conform to the new image size, but decided against it. It was a lot of coding for very little event. Besides, if the user creates an image that is too large for the 500X500 window, they can always click the maximize button.

Now, we begin lining up lines of HTML code to go into the new window. These lines of code are written to the new window through document.write statements assigned to the new window through the variable OpenWindow. Each is a new line of code.

As you can see, it's about as simple an HTML document as you can get. It offers a title, a background color, and a centered image. The image is what we're worried about now.

I used three variables to create the new image. The first is "path." Remember that from way back in the prompt code? That's the name and/or path of the image. Then "c" is the new height and "d" is the new width. When the document.write statement writes it to the page, it will appear as in-line image code and the image will display in the dimensions set by the math function from the last Tip.

If you recall, we needed to change out a couple of variable names to do the math for the second table's results. Well, in order to get that second table's results to display, we needed to use those new variable names in a new function set up to display the image:

function newWin2()
{
var OpenWindow=window.open("", "newwin2", "height=500,width=500");
OpenWindow.document.write("<HTML>")
OpenWindow.document.write("<TITLE>Image</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR='000000'>")
OpenWindow.document.write("<CENTER>")
OpenWindow.document.write("<IMG SRC=" +path+ " HEIGHT=" +f+ " WIDTH=" +e+ ">")
OpenWindow.document.write("</CENTER>")
OpenWindow.document.write("</HTML>")
}

It looks similar, but there are a few changes. The name of the function is newWin2() so it can be called upon by the second button. Notice that the name of the window has changed. It is now "newwin2." You can't have two windows with the same name on the same page. Since we figured the new height and width using "e" and "f", those are the variable names used to create the new image.

So, there you go. Multiple scripts working together to create one nice effect. I don't know that this script is good to put online for others to play with, I see it more as something to help you when creating your own pages.

Next week we're going to go after another script that will help you put pages together. I always get confused putting frames code together. I never get it right the first time. I always thought if I could just get something that would do the code for me, life would me much easier.

We'll start looking at just that next week.

Next Week: New Script! Setting Frames

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: jburns@htmlgoodies.com.


Learn to write your own JavaScripts with the HTML Goodies 30-Step Primer Series



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date