|
|
Miscellaneous functions
There are a range of other important page functions which
do not fit under a particular heading. These are
explained below:
Insert image
|
Opens
a window to add an image in the current cursor position or to
change properties of the selected image
Adding an image / editing an existing image
To edit properties of an image at a later date, right click
on it or select it and then click on the corresponding button
in toolbar
TIP : Keep to a naming convention when using
images. Name them logically, e.g. about-us.jpg or flower1.jpg,
as this makes it easier to select and keep track of images as
you use them. Keep a logical set of folders e.g. 'navigation'
or 'flowers' in the above example and place your images in them
as you browser items onto your site. This will help you organise
image resources as your site gets larger.
TIP : As a rough rule of thumb, use .jpg
images for photographs, and gifs in general for drawings or cartoons.
Keep image sizes to a minimum to make the pages as fast as possible.
Try to keep pages to less than 70K per page. DO NOT use bitmaps
produced by paint for example, as these are very large in comparison
to jpegs. You will need to 'save as jpeg' and not just add a .jpg
after the file name as this does not work.
TIP : When adding or editing images, make
sure the 'source' radio button is pressed. There are two image
roll over 'special effects' features, 'Enlarge'
and 'onMouseOver', explained below.
 |
Image dialogue window
This consists of four parts:
File manager (in the left
part of the window).
Preview area (in top
right corner).
Properties area (below preview area) and File
uploading form (in the very bottom of the window).
File manager
Name of the current folder for file uploading is highlighted
in red colour. To change folder for file uploading, click
on name of the folder required.
To create a new folder, click on 'create folder'
link, input a name and press 'OK' button to confirm or 'cancel'
to decline the action.
Click on 'r'/'x' links to rename/delete file/folder.
Note: folder can be deleted only if
there are no folders / files in it
|
Preview
When an image is selected in file manager or in file uploading form
(in field for path to selected client-side file) its preview is
shown in preview area
Click on the 'browse' button in uploading form to
select a file to upload from your computer hard drive or CD etc.
Image properties to set / modify:
Align: horizontal alignment of image;
width: width of image (automatically put there for
you);
height: height of image (automatically put there
for you);
border: width of image border (automatically set
to zero);
vspace: vertical space between image and text;
hspace: horizontal space between image and text;
alt: alternative text for image (is shown when mouse
cursor is over the image on the live web page);
Source: tells you where the image is stored.
Image roll overs
We have introduced two neat little features to add
some interest to pages.
Image effect 1) 'Enlarged' image roll over to a different
place.
Firstly, images can be placed so that as the user of the site
rolls their mouse over the image, it will pop up elsewhere on
the page. Several images can be placed to roll over to the same
'other' point on the page.
Uses for this feature:
You can use the roll over effect to produce a larger image giving
more detail of the smaller image or a completely different image
may be used. The image used as a roll over can be a different
(usually larger) image and need not be a copy of the initial image.
This could be useful in showing larger shots of a particular product
or to show more detail about a particular section of a web site
as a user places their mouse over the icon.
In this one you will need to have placed a 'changing
image' using this icon 
somewhere else on the page to act as the point at which the image
will roll over. Click here
to see how to insert this roll over point
NB You can add multiple images to roll over
to this 'changing image'
point but there can only be one 'changing
image' point on this page.
Please note that to get the best effect,
the larger images should always be the same size and also be the
same size as the 'changing image' that you already inserted (which
is where the images roll over to).
How to insert this:
Firstly upload the images by using the upload
file / image facility. Alternatively, you can use the upload
and resize image facility to resize images to the correct
size for you and optionally also produce your thumbnail images.
1) Now use the insert image button to select one
of your uploaded thumbnail images.
2) Then tick the 'Enlarge' radio button in the dialogue
window (see above) and choose the larger
version of the same image which you have just uploaded. This larger
version of the small image is the one which will appear elsewhere
on the page, where you have placed the changing
image marker.
3) Click 'OK' to confirm your choice. This will
have placed the small image on the page.
4) If you wish to have more than one roll over image
rolling to the same point, simply repeat this operation to insert
other images which will roll over at the 'changing
image' point, until you are done.
If you have not already done so, now you will need
to insert the marker for where you want the 'changing
image' to appear (somewhere else on the page) for this to
work. You only insert one 'changing
image' as this is the point where the images roll over.
TIP: The 'Enlarge' image should be the same
dimensions as the 'changing image'
so that it is not distorted when rolling over.
Image effect 2) 'onMouseOver' make an image roll over where
the mouse is.
Secondly, you can have an image with a roll over image as a user
puts their mouse over it. This can give more interest when used
on navigation buttons for example.
TIP: Keep the image and roll over image the
same size, otherwise one of them will seem distorted.
Firstly select the 'source'
radio button above and then choose your
image. Then tick the onMouseOver button
and select the image source. This will have the effect of creating
a roll over image over the image at the point of placement.
NB You can have a number of roll over images
on a page and these can be used on the same page as an 'enlarge
image function.
TIP: Keep the roll overs simple to keep the
page download overhead as low as possible. Good effect can be
made simply by lightening or darkening the original image slightly
an using it as the roll over image.
TIP: Keep to a ridged naming convention when
using roll over images for example 'aboutus.jpg' and 'aboutus-roll.jpg'
as the roll over etc. and try to keep roll over images in a roll
over directory to save overwriting or mistakenly using the wrong
image.
