3.9.1.3. Adding and Editing Images
The Insert/Edit Image button on your toolbar allows you to insert an image or edit one inserted previously.
To insert an image into the editing area, first click where you would like the image to appear, and then click the insert/edit image button.
The Insert Image dialogue box will open to the General tab where you can enter or select the image you would like to insert.
To edit existing images simply click on the existing image before clicking the Insert/Edit Image button and apply the following instructions to the existing image.
General Tab:
The first thing to do is enter or select your Image URL:
- If you know the URL for your image type it into the text field to the right of the first box on this tab called Image URL: For external links, include the correct prefix (eg. http://).
- To link to an image previously uploaded to your site (or one that you want to upload and link to), click on the small browse icon
to the right of the Image URL: text field and the image manager will open.
- To link to one of the images displayed in the image manager, select it by clicking on the thumbnail of the image.
- To upload a new image, click on Upload in the top toolbar of the image manager and the upload dialogue box will open allowing you to type in an image filename or browse on your computer to find an image file.
- Once you have entered or located your image, click the Upload button.
- When your image has finished uploading, close the upload image dialogue box, select your uploaded image by clicking on it (as above).
- You will be returned to the General tab of the insert image dialogue box where you can continue to format your image.
The image you have selected will appear in the preview box at the bottom of this tab area. You have a number of additional options here as well including,
Adding an Image Description: to your image by typing it into the text field provided (on right). Adding a Title: to your image by typing it into the text field provided (on right).
Appearance Tab:
Once you have selected or entered your image URL, and added a title and description, you have a number of other options for editing your image under the other tabs in this area of the editor.
Switch to the Appearance tab by clicking on it at the top of the Insert/edit Image dialogue box.
- Alignment: This option allows you to select the alignment you want for your image from the drop down menu to the right of the Alignment: text field. The preview pane on the right (with the image of the tree in it) will show you how the various alignment choices will affect the way your image lines up with your text.
- Dimensions (in pixels): here you can enter the size of your image into the text fields provided. Enter image sizes in the order of width by height.
- Constrain Proportions: If you want your image to maintain its aspect ratio (the ratio of width to height) whenever you resize it, make sure you check the Constrain Proportions check box directly below your dimensions.
- Vertical Space (in pixels): entering a number into this field inserts white space above your image. The preview pane shows how it will effect the way your image displays.
- Horizontal Space (in pixels): entering a number into this field inserts white space to the left of your image. The preview pane shows how your image will be affected.
- Border (in pixels): entering a number into this field will create a border of that many pixels wide around your image. Again, the preview pane shows the effect of your edits.
- Style: This field will automatically display any style parameters you have entered above, (border etc.), or you can type in CSS styles directly if you are familiar with CSS.
Advanced Tab:
Once you have finished editing the appearance of your image, there are a few more things you may choose to do with it.
Switch to the Advanced tab by clicking on it at the top of the Insert/edit Image dialogue box.
There are two main areas in the Advanced tab: Swap Image and Miscellaneous.
The first of these allows you to create an interesting effect on your website by displaying multiple images in one location on your page with the cursor action of the site visitor triggering a change from one image to another.
The second area of this tab contains some HTML and CSS properties that allow you to further define your images and will typically be used by individuals with some design experience.
1. Alternative image: if you wish to use the alternative image function, first check the checkbox below the Swap Image heading to activate this option.
For mouse over: if you wish to enter or select an image that will appear when a visitors passes their mouse (or cursor) over the original image, enter the image URL in the text field, or click on the small browse icon to open the image manager. Follow the same steps for selecting or uploading an image that were described under the General tab of the Insert/Edit Image area.
For Mouse out: if you wish to enter or select an image that will appear when a visitors passes their mouse (or cursor) off or away from the original image (or the mouse over image), enter the image URL in the text field, or click on the small browse icon to open the image manager. Follow the same steps for selecting or uploading an image that were described under the General tab of the Insert/Edit Image area above.
Note: You may choose to re-select your original image as the For mouse out: image. This means that a visitor to your webpage would see the original image when the page loads, the alternative image when they pass their mouse over the original image, and then the original image would return once they pass their mouse away from the area of the image.
2. Miscellaneous: These are some miscellaneous HTML and CSS properties that allow you to further define your images. If you do not have web design experience, we recommend that you leave these options blank.
Once you have finished entering the information on all tabs, click [Insert] at the bottom left of any tab to return to editing screen.
