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.
(without the quotes)!
(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.
- 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,
Otherwise, let’s take it in order.
var path = prompt("Text on the gray","Text in the box")
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.
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.
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