Simply inserting an image in the middle of a page is just not good enough, sometimes.  Pretty well never is for me.

So, for those interested in getting the most out of images (and the Full HTML formats, especially) and don't mind doing a little extra credit work, this is the page for you!

First, open up the Image Properties dialog by right-clicking on the image and selecting it.

Image Info

The first tab is called Info and contains the basic settings.

• URL was covered on the more elementary images page.  It's how you tell the editor where your image is on the server.
• Alternative Text is used by search engines, screen readers, and those hardcore Lynx afficionados.  Basically this is displayed when your image is not.
• Width and Height may be used to constrain an image to an exact size, in pixels.  Alternatively, you may simply select the image you wish to resize and use the small squares that appear to drag the image into any dimensions you desire.
  
• Border, HSpace, VSpace, and Align are easy-to-use CSS.  They are the quick-and-dirty solution to layout and presentation.

Link

This is pretty straightforward.  You can make any image into a clickable link by entering the URL here.  The Target option may be used to pick how the link opens.

Not setting the target simply means that the link will open in the same window as the image.  The "Same window (_self)" option is the same thing.

If you would like your links to open in a new window (or tab) so that a reader doesn't lose his or her place on the page when they click something, choose the "New Window (_blank)" option.

The "Topmost (_top)" and "Parent (_parent)" options are primarily used in the case of frames which we don't really use around here.

Advanced

Okay, now to the fun stuff.  Here is where you are going to find doing a bit of research to be very rewarding.

• Id is used to set a unique (to the current page) identifier for the image.  This can be used to jump to a specific area of a page by adding the id to the end of the URL.  To illustrate:  http://www.example.com#id
  When the linked page loads, the browser window will scroll to place the image (any any element sporting an id) at the top of the display.
• Language Direction and Language Code are used for internationalization and translation purposes.
• Long Description URL is used for accessability.  Where an image is used to convey a complex concept in a visual manner, this provides a link to a separate document that presents the same information in a textual format.  This allows, for instance, persons making use of screen readers to have access the same information.
• Stylesheet Classes allow you define the display of your images with a stylesheet.  That way one could, for instance, define all images in all their content to be displayed in an identical manner simply by specifying their class here.
• Advisory Title is the tooltip that appears when hovering the mouse pointer over an element.  Generally the title and alt attributes should be set the same.
• Style allows you to define the CSS settings for this one image.  You may adjust nearly all aspects of the image presentation with the appropriate markup here.  Discovering what is possible with CSS is left as an exercise to the user but we'll go ahead and provide a few examples below.

Styling Images

Okay, when you first insert an image, CKEditor likes to put it in its own paragraph.  That's fine because, really, that's how images are supposed to be rendered:  all by themselves.  Inline imagaes and other such trickery is managed through the use of style!  The reader may have noticed that the images found in this instruction manual tend to be all over the place.  Most of that is done by floating the images to either the right or left.

By adding "float: right"...

This becomes that.

It may be a bit difficult to see, but although the text is flowing around the image, it is doing so very closely.  Too closely.  That picture needs some room to breath.  This can be accomplished by increasing the size of the margins.

Will result in... 

And, in case anyone wondered, most of the images in this guide are styled in the following manner:

There are many available border styles and a (mind-bogglingly) large amount of style options available.  Keep in mind that some of this advanced trickery is only available if you are using one of the Full Input formats!  So if you try something and it doesn't seem work for you, that might be why.