Before images can be inserted into pages, you need to have first uploaded them to the Site Editor. Details of how to do this are given on the Uploading Images page.
- Select the 'Image' element from the drop down list and click the Add Item button. The screen then updates to show the image Edit item window.
- The Image to use box contains the names of all the images uploaded to the site editor for this site. From this list choose the image to be displayed.
- Decide on the thickness of the border (if any) to be placed around it in pixels. The border will be black if displayed.
- Decide how the image will be aligned horizontally. The default setting is left.
- Decide whether or not you wish the image to also be a link. The choices available are:
- Select the 'Image is not a link' option if you do not wish the image to be a link.
- Select the relevant page or heading from the drop down list of options to make a link to a different part of your site.
- Select the 'External Link' option and type the full name of the web page that you wish to link to in the External address box. e.g http://www.site.co.uk
- Click the Store Changes button to add the new image element to the page and return to the Page Editor screen.
Image(random)
Image (random) is useful if you require an image to be different every time you reload the page. It is the same process as inserting an image (see above), only you have a list of which you must select which images to use.
Image (rollover)
Image rollover is particularly useful when creating creative navigation buttons. It allows an image to change when the mouse is moved over it.
Before images can be inserted you need to have first uploaded them to the Site Editor. Details of how to do this are given in Uploading Images.
- Select the 'Image' element from the drop down list and click the Add Item button. The screen then updates to show the image Edit item window.
- The 'Image to use' box contains the names of all the images uploaded to the Site Editor for this site. From this list choose the image to be displayed.
- From the 'Rollover image' drop down list, select which image you want to use as a rollover image.
- Decide on the thickness of the border (if any) to be placed around it in pixels.
- Decide how the image will be aligned horizontally.
- Decide whether or not you wish the image to also be a link. The choices available are:
- Select the 'Image is not a link' option if you do not wish the image to be a link.
- Select the relevant page or heading from the drop down list of options to make a link to a different part of your site.
- Select the 'External Link' option and type the full name of the web page that you wish to link to in the External address box. e.g http://www.site.co.uk
- Click the Store Changes button to add the new image element to the page and return to the Page Editor screen.
Image Map
The Image Map element is for advanced users with HTML experience only. You need to first create an image map using whichever authoring tool you normally use. From this you should end up with an image and a block of HTML.
From here you'll need to upload the image using the "Image Listing" link on the page listing page. After doing this, insert the image map element where you want the image to appear. Select the image that the map is made for from the drop down menu.
The next step is to take out the image map tags from your HTML. Do this by copying everything inside the <MAP></MAP> tags, like the example below:
<area shape="circle" coords="428,121,4" href="page1.html">
<area shape="circle" coords="372,138,4" href="page2.html">
<area shape="circle" coords="327,57,5" href="page3.html">
Paste this inside the "map <Area>s box" and type in a name for your image map in the box provided.
Click "Store Changes" to save the image map.
Line Break
It is frequently useful to be able to force text to start after images, or to be able to make images appear below each other instead of side by side.
To do this, use the "Line Break" element. The only option this element has is "Clearance", which should be set to the default - "Clear All" - to make the next element on the page appear below everything.
