Image Tutorial

Inserting an image in Omniupdate can be accomplished by following a few simple steps.  Also, an image map can be easily associated with that image.  For information about editing images in Omniupdate, look here.

Inserting Images

To insert an image use the WYSIWYG Insert/edit image tool.

Clicking on the Image Insert Tool brings up the Insert/edit dialog box that you can use to select the image from the production server. Within the Insert/edit dialog box click the Browse icon to browse to the image you would like to insert.

 

Clicking Browse brings up the OmniBrowser dialog box. Select the image you would like to insert from the list on the left hand side. Once you have found the image you want click the Select File Button. You will see your selected image appear in the Image Preview window on the right hand side.

Once you click the Select File Button you will be taken back to the Insert/edit dialog box where you will need to type in a description for your image.

If you forget to do this step you will see this pop up warning message. The Image description cannot be blank.

After you have entered the image description click Insert and your image will be inserted into the WYSIWYG editor.

 

Image-Map

To use the image-map feature in the advanced properties of the WYSIWYG image insert tool, the web developer must have first created a properly coded image-map with the appropriately defined hotspots in the HTML of the target web page. The image map must be named (eg. name="navmap").  Once this is done a user can, in the WYSIWYG editor, click on the insert image button, choose the appropriate image, go to the advanced tab, and type in the name of the image-map.  This name must be preceded by a # character (eg. #navmap). Now the image will be associated with the imagemap.

Due to the nature of image-maps (dimensions are hard set for the hot-linked areas of an image), an image must be of the proper dimensions to support the map, as well as have the image content that 'maps' to the areas that are defined in the image-map (eg. an image of Canada would be useless for an image-map defined for the United States).

How to add a mapped image.

To add a mapped image to your page use the WYSIWYG image insert tool.

Clicking on the Image Insert Tool brings up the Insert/edit dialog box which you can use to select your mapped image.  Within the Insert/edit dialog box click the Advanced Tab.

In the field labeled Image Map type in the name of your image map.  It is very important to keep in mind that you must place the pound sign - # at the beginning of the image Map name in this field.

For example if the developer used the name navmap you would type in #navmap

Once you have inserted the correct name for the image map click Insert and you new mapped image will appear in the WYSIWYG.

For more information about Image Map HTML click the links below:

Image Map Tutorial

w3schools

javascriptkit

 

Decorative Images

Decorative images are images for which no <alt> descriptive image tag is required. Inserting decorative images is supported in version 9.0, but must be enabled for each site by an administrator.

Enabling decorative images is easy for level 10 administrators. Simply log into OUCampus, navigate to Setup > Sites > Edit and select the Admin Only or All Users option from the Decorative Images selector in the WYSIWYG Editor section.

Enabling Decorative Images

Once enabled, the insert image dialog in the WYSIWYG editor will now allow users to check a box indicating that the image to be inserted is a decorative image and omit the image description.

Decorative Image Checkbox

Allows for an empty ALT tag on decorative images added to the WYSIWYG editor.