Inserting Images in your Posts

From: boxhead ® 25/08/2003 11:57:48 AM
Subject: Inserting Images post id: 69382

Basic

This gives you the basic picture on the page...

<img src="URL OF THE PICTURE HERE">

If that's all you want, don't worry about anything else... the pic will get there :)

<img src="//www.abc.net.au/science/scribblygum/March2000/img/rednstint.jpg">

Image: Clive Minton.


Borders.

To give a bit of a border around your picture, which makes it stand out from the background (IMO) better you only have to add a little more coding like this... BORDER="2".

<img src="URL OF THE PICTURE HERE" border="2">

without border
Plain image.

with #2 border
Border=2

with #4 border
Border=4

Image courtesy of the Environmental Protection Agency (Qld)


Resizing

If you have a picture that you think is too big for the width of the scribbly gum page you can control the size by adding one of the following codes... width="200", height="300" or width="80%".

<img src="URL OF THE PICTURE HERE" width="200">

normal size
Normal (width=250 height=185)

width=100
Width=100

height=100
Height=100

width=20%
Width=20% (of the window)

Image: University of Western Australia.

Be aware that sizing the picture up (making it larger) reduces the clarity, even sizing down does. It's better to have the right sized pic to start with, but this is a quick way of doing it :)


Title

You can also give the picture a title that comes up when you roll your mouse over it or if the image doesn't show. This can be helpful for people that have images disabled or can't view your picture because of restricted access. You just add the coding alt="cicada".

<img src="URL OF THE PICTURE HERE" alt="cicada">

cicada

Image: Australian Museum


Combinations

And of course you can do combinations of them all. You can give it a border, a title and resize it all at once if you like.

<img src="URL OF THE PICTURE HERE" border="3" width="200" alt="echidna">


Plain image

echidna
Border=3 Width=200 Alt=echidna

echidna on the run
Border=1 Width=150 Alt="echidna on the run"

Image:M McKelvey/P Rismiller

From: nut ® 25/08/2003 8:23:21 PM
Subject: re: Inserting Images post id: 69468

<img src="URL OF THE PICTURE HERE" align=right> or
<img src="URL OF THE PICTURE HERE" align=left>

The alignment attribute is simply a matter of specifying which side you wish the image to appear on and then include the text (that raps around the image) after. In this example I have included align=right giving the result that the image appears on the right and the text flows down the left.

By using the align=left the image appears on the left and the text flows on the right. In both cases you place the image first and the text latter.

Image: Frank Fontyne courtesy
of your ABC: Soaring the Glory

In each instance where I no longer wish the text to flow beside the image I include the CLEAR command by typing <br clear=right> or <br clear=left>, matching the left/right with the placement of the picture.

If you wish you can also increase the space around the image by using the hspace=X and vspace=X attributes. hspace is the horizontal space and vspace is the vertical space, X is replaced with the number of pixels you want the space to equal. For example, if I repeat the example above but include a horizontal space restriction, we then get:

<img src="URL OF THE PICTURE HERE" align=left hspace=20>

By using the align=left the image appears on the left with the text flowing on the right. In both cases you place the image first and the text latter.

If you are unsure go ahead and try your luck in the chat thread. Perceiving the end layout can be difficult so don't be afraid of a few failures early on.

:)
From: nut ® 25/08/2003 8:54:16 PM
Subject: re: Inserting Images post id: 69478
<img src="URL" align=absmiddle>

You can also align images to an individual line of text.

You can use texttop, top, middle, absmiddle, bottom and absbottom. Results can sometimes be erratic especially with more than one image to a line.

:)
All pictures used above have been taken from the Scribbly Gum - Events in Nature pages :)
The views and opinions expressed on this forum are those of the individual poster and not the ABC. The ABC reserves the right to remove offensive or inappropriate messages. ABC conditions of use statement.