Image Proportion Script Idaho

provided by: 
Originally published at Internet.com

Tip to my Lou...

I received this "Proportional" script from Ann Evans. It's a great idea. You enter the height and width of an image you want to resize. Then, by entering a new height, the script figures the new width, keeping the same proportions the image originally had.

I really liked the script, but thought it asked too much of the user. I knew you could grab the image's height and width straight from the image. Then, after setting the new height and width, it seemed logical to show the image in its new dimensions.

So, using Ann's original calculations and table structure, I rewrote and added on until I got this. Try it out.

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.)

Did you like the purple background? I thought it was a bit easier on the eyes than bright white.

The script uses a series of steps to complete the effect. We'll start with the first thing you see on the page, the prompt. The blip of prompt code asks for the path to the image. Yes, I know it's a little wordy and long to read.

Once the prompt has the path and/or name of the image, then it uses that to create an image flag that posts the image to the page. Let's look at it. Please understand that I have greatly reduced the amount of text in the prompt box for this example.

As I pointed out in the last series of Script Tips, one of the hardest things to do when writing a script is to guess at all the possibilities that could occur when someone uses your script. When this prompt popped up, I saw four events that could happen. Here are those events and my solutions:

* The user enters a correct image name and/or path
Solution: the image is posted

* The user clicks OK, making the changes
Solution: Alert box telling user to put in image name

* The user clicks CANCEL
Solution: Alert box asking for image name

* The user enters incorrect information
Solution: I can't predict incorrect info, so that results in a broken image, which gives a 40X40 height and width

I wrote the prompt above to cover each of those concerns. If you'd like to go back to the example and try each event, click here. Otherwise, let's take it in order.

var path = prompt("Text on the gray","Text in the box") This is the basic format of a prompt. Again, I have greatly reduced the text used in the original, but you'll get the idea. Whatever the user writes in the box is assigned the variable name "path."

if(path == "Text in the box") { alert('Come on, put in an image name') javasscript:location.reload() } The first If statement is used if the user simply presses OK without changing the information in the box.

If the "path" equals "Text in the box" (note the double quotes so that 'Text in the Box' is seen as a text string rather than code), then pop up an alert that reads "Come on, put in an image name." Once the user clicks OK on the alert box, javascript:location.reload() reloads the page and the prompt pops up again.

Two things: There are curly brackets around the alert and the reload. That's important so that the script understands to do both if the statement is true. Also, note that the text string is the same as what is in the text box on the prompt. Make sure those two are the same when you use the script or no dice.

if(path == null) { alert('Do not click Cancel') javascript:location.reload() } Here's the second If statement. The script goes to this one if the first isn't found to be true. This is triggered if the prompt data is null. That means the user simply clicked CANCEL. Notice "null" is not in quotes. It is not a text string, but rather a command.

The same basic format is used if this If statement is true. An alert pops up, the page is reloaded, and the prompt pops up again.

else {document.write("");} If both of the If statements are false, which is what you're hoping for, then a document.write statement is used to create a basic image flag, posting the picture the user has entered.

See the NAME=thepic in the flag? That will become important in the next section of this Script Tip.

Next Time: Grab and Display the Dimensions