Cookies on our website
Big Blast Design
Take control of your business

Call us now on 01279 755155

Connect with me at Twitter (click here) Click here for my LinkedIn page Click here to join me at Google Plus
Home > Website CMS > Other functions > Roll over image

Editing tools
Below is a copy of the tools available within the web builder. Click on each for the relevant help files:

Edit content boxesPublish or republishPage choicesHelp filesPreview pageSave page
Find and replaceCutCopyPastePaste from external sourceUndoRedoTable - insert or editInsert or edit an imageInsert or edit mediaInsert an emoticonAdd rule offAdd or edit a linkInternal page linkInsert or edit bookmarkInsert special charactersAdd a formAdd a text fieldAdd a text area (form)Add a buttonAdd a drop down list (form)Add a tick boxAdd radio buttonInsert content markerInsert roll over image
StylesFontSizeBoldItalicUnderlineMore font optionsFont colourHighlightAlign leftAlign centreAlign rightFully justifyMore paragraph optionsNumbering - ordered listBullet points - unordered listMore list optionsDecrease indentIncrease indentAdd or edit html snippetsAdd image galleries to pageAdd content box

Insert a roll over image

Insert roll over image This option is available under the advanced options, only. Clicking on this icon opens a window to add an image in the current cursor position.

Insert a roll-over image 



Image effect 1) 'onMouseOver' make an image roll over where the mouse is.
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.

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 effect 2) 'Enlarged' image roll over to a different place.  NB This feature has been omitted from the latest version of the software, as nobody was using it - please tell us if you want it back!
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 browse button.

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' images should be the same dimensions so that they are not distorted when rolling over.



Last update: 15.03.2017