2016 Sandbox

Free Republic | 01/01/2016 | Free Republic

[Ray76]

Making a bar chart

Bar Graph Title

Item  Value  Percent
  A   44.52  12.49%  
  B   33.05   9.28%  
  C   28.65   8.04%  
  D   27.23   7.64%  
  E   26.97   7.57%  
  F   25.78   7.23%  
  G   23.21   6.51%  

You will need a small image file to supply one unit of bar. The image will be stretched to fill the height and width you specify.

[Ray76]

Here is another way to make a bar chart

Bar Graph Title

A   44.52  12.49%

B   33.05   9.28%

C   28.65   8.04%

D   27.23   7.64%

E   26.97   7.57%

F   25.78   7.23%

G   23.21   6.51%

This method uses table cells filled with a clear image. The color of each bar is determined by the background color of the cell, not by the color of an image. The cell contains the clear image, the image width is stretched to the width specified on the img tag, which causes the table cell to expand to fit the image.

There's a little more setup involved than in the first method, for example in order for each bar to have a unique length each row in the chart must be it's own table, but it's worth the effort.

[Lurkina.n.Learnin]

http://charts.stocktwits.com/production/original_62011226.?1473170574

[upchuck]

[snarkpup]

Testing a new imgur account:

[Ray76]

September 2016

Sun	Mon	Tue	Wed	Thu	Fri	Sat
				1	2	3
4	5	6 this and that	7	8	9	10
11	12	13	14	15 this, that, and the other thing	16	17
18	19	20 High Point, NC; Kenansville, NC	21	22	23	24
25	26	27	28	29	30

[mainestategop]

[heterosupremacist]

VERY informative! Thank you, and thank ‘all for posting!

[Baynative]

For a long time I've been using a short cut to down size pictures to save band width. I always pasted it instead of typing it new each time and I just lost it. It had something like Does this sound familiar?

[Baynative]

Aw geez, that didn't work because of the brackets. It was a command inside the brackets that read something like, img 300= src =

I always used it to keep band with down by not posting huge pics, can't find it anywhere.

[Baynative]

Ha figured it out with trial and error
img height="300" src="

[Mycroft Holmes]

Resizing images does not reduce the bandwidth required. The entire image is always downloaded and then resized locally on your computer. Here is my general rap on images.

Chow for paragraph eater.

Images:

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

Access Denied! - No Hotlinking - Occasionally you will see an image that looks good on the site of origin but won't show up if you use it in a posting. Many sites block what they term as "hot-linking" thinking that people who link to their images from pages that are not theirs are stealing their hard paid for bandwidth. They have a point. Either use another image or host it on your own site to fix this problem.

Often the poster will see the image that hot-linking is not allowed for while other users are whining about no image present and red X's. This is because the poster's browser has cached the image and doesn't have to go to the blocked site to get it. A refresh of the page should show what is what.

Size: You can easily vary the size of a given image by specifying it. You may specify size in terms of pixels, em (one character height-width), or percent of enclosing container. Given the wide variation in display platforms the best results are usually obtained by using percent to specify size.

<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="15%"> Yields:

If you are specifying the size of an image it is best to do it in only one dimension and let the computer figure out what the other dimension should be. This will result in images that have not been distorted. Another neat trick is to specify the image size as a percentage of the width of the container the image sits in. This results in a uniform presentation of the image across all possible platforms without having to compute the image size at all.

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. Another common format is .png which is a static image format from Microsoft. You will also see images that are .pdf Postscript Document Format. Images in .pdf format will often not post on websites because the .pdf file can easily be a virus container.

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.

[Baynative]

Thanks for the education. You are pretty slick.

[fision]

Thanks for the post. How do you add a tagline after your handle?

[deport]

Use this thread to practice your HTML. Scroll down to how to post an images and practice

http://www.freerepublic.com/focus/f-chat/3378678/posts

[grayboots]

Practicing. Crossing fingers...

[ptsal]

.

Test image size by reducing 50%.

[ptsal]

The smaller duck, using only width="25%" & right caret to close the line.

[BykrBayb]

Thanks for the practice thread.

[rdl6989]

Testing