SEQUESTERPOCALYPGEDDON PHOTOGRAPHS!

Original Content | 3/1/2013 | By Laz A. Mataz and other freepers

[Jet Jaguar]

You nailed it to the fence!

[amom]

Yeah!

[TheOldLady]

You both misspelled "sequesteapoclyptageddon"

</grammar nazi>

But I still love you. [smooch]

[UCANSEE2]

Starbucks revises menu in attempt to survive.

[no-to-illegals]

Thanks Laz. Great thread.

[Mr. K]

"You both misspelled "sequesteapoclyptageddon""

Dang.. I always have trouble with that word

[Windflier]

Man, that's a huge image. You know, you can shrink them to fit the page better by inserting a simple HTML command like this:

< img height= 300 src="www.yourimagelink.etc" >

I added spaces between the commands and the first and last carets, for the above to print. All other spaces are as shown. You can choose whatever number you like to increase or reduce the image size.

[Mycroft Holmes]

My screed for images. I find that using % to size things generally works better than using pixels.

<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png"><p>
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="30%">
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="15%">
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="7%">
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="4%">
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="2%">
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="1%"> .

Yields:

.

J. R. "Bob" Dobbs receding into infinity...

<img src="http://mumble.com/image.jpg"> substitute the actual source of the image for http://mumble.com/image.jpg This image must be out on a server on the web someplace, not on your machine. This is why people have flickr and picassa accounts. You can easily find out the URL of an existing picture on the web by right-mousing over it and selecting Open Image In New Tab. This will open a tab on your browser containing only that image. The URL of that tab is the one to use as your src="" value.

Some of the photo storage sites on the web (flickr) try to drive web traffic to their site to harvest advertising by providing a convenient pointer to their site that isn't a URL to a .jpg To get the proper URL try right mousing over the image and select Open Image in New Tab. This should get you the naked image itself, without all of the surrounding advertising. This is the URL you want to use.

Size: You can easily vary the size of a given image by specifying it. The native size of the J. R. "Bob" Dobbs picture above is 324x216 pixels. Typical screen pixels per inch numbers for normal displays are in the range of 75 to 150 so the original Dobbs'Head will likely appear on your screen somewhere between 2.88 to 1.44 inches wide.

The next row of Dobbs'Heads are scaled to the width of the enclosing container. We use the width because its value is mostly apparent on the screen. The value of the container's height is less so. The first Dobbs'Head is scaled to 30% of the width of the container. The next at about half that, and so forth... This produces a line of attractive Dobbs'Heads receding into infinity that occupies about half the width of your page, all without needing to know how wide your page is. The size of the images will change if you grab the edge of the page and make it wider or thinner. This is the reason you want to scale images (and anything else, really) by percentages rather than pixels.

In the past it was best to keep your scaling to powers of 2 to minimize scaling artifacts. Current smoothing algorithms and processor speeds make that pretty much unnecessary. Remember that scaling up will not introduce new detail into the existing picture.

Stationary images usually end with .jpg or some variation. Moving images are possible using images which end in .gif The .gif format allows for short sequences of stationary images to be presented like a very tiny movie.

You can position an image relative to its surrounding elements by adding the attribute align="middle" to the tag. Recognized attribute values are top, bottom, middle, left and right.

<p><img src="http://myphysicsprep.com//images/docs/61cb2_zQLMZ.gif" align="right" alt="Kittie doing its nails."></p> Yields:

This is some text to show how it flows around the image. This is before the image in the source HTML with a paragraph called out before the text. Isn't the expression of the cat's face just priceless? ♣

And this is text right after the image. I have found left and right attributes to be useful, the rest not so much. You really seem to have to have quite a bit of text for the behavior of the flow to come out. Dinking with the browser width seems to help illuminate the behavior of the flow. Perhaps a smaller picture in the x-axis? But it's sooo cute.

Does adding a paragraph move the text down below the image? Nope, sure doesn't. Think of the anchor as the upper left corner of the image and as far as HTML is concerned that corner goes right after the club following "priceless", but it is aligned right so it starts on the line with the club ♣ and hangs to the right.

In general, if you are posting images it is beneficial to place the image in a paragraph of its own and use a closing tag with <p> </p> as it helps the browser software properly place images.

The alt="Kittie doing its nails." specifies the text that appears when you mouse over the image. Some folks use these descriptors by running them through vocal-synthesis software. The blind using computers find these descriptors quite helpful. It's important to remember that an image (as well as any other element) can be used as the clickable part of a hot-link.

μολών λαβέ

Free course management software for homeschoolers and educators.

[Windflier]

Great post, Mycroft. That's a fine lesson, and (if you haven't already) should be added to the current FR HTML thread here: HTML Sandbox 2013

BTW, I've got that image of the cat saved in my pic dump. Used it many times on the forum to warn suspected trolls and malcontents :-)

[TheOldLady]

[giggles] [smiles]

[Safetgiver]

beer and wine were disapperating...OHHHH, NOOO! I hate disapperating beer and wine! It makes it taste like skunk pee!

[Mycroft Holmes]

Thanks, I haven't posted it to the sandbox because it's a small fragment of my user profile and the sandbox is pretty good as it is (and mostly unused). I've got another version that illustrates the differences between HTML4.01 and CSS as part of an Xampp tutorial, pretty much useless here. I need either a life or better hobbies.

μολών λαβέ

Free course management software for homeschoolers and educators.

[Rebelbase]

[Windflier]

I need either a life or better hobbies.

I think your 'hobby' is something to be admired. Your knowledge and skill in the area of computing is obviously much better than the average users'. Personally (as an average user) I think it's an incredibly valuable thing to have mastered.

I just noticed the link at the bottom of your post. As a home schooling parent, I'm going to give that a look. Thanks!

[Little Bill]

Proper storage helps, I agree.

[N. Theknow]

BFLWIAGOWSTBW!

BumpforlaterwheniamgoofingoffwhilesupposedtobeworkIng

[Taxman]

Great thread! Most fun I have had in a long time!

Add me to your ping list, please.

[SomeCallMeTim]

I didn’t know that.. but thanks.

Funny, it didn’t seem all THAT big on my computer? Maybe it scales to screen size??

Had it seemed overly large, I would have tried to scale it.

[SomeCallMeTim]

OMG.... you seem to GROSSLY over-estimate my ability, and desire to manipulate images!

[Windflier]

Funny, it didn’t seem all THAT big on my computer? Maybe it scales to screen size?

Yes, I think it does. I'm still using an old Trinitron CRT monitor (which I love), but it's not as wide as a lot of the newer monitors.