BASICS

ADMINISTRATION

DEVELOPMENT

SUPER ADMIN

  LAST UPDATED
11/14/2013

Inserting Images and Image Maps

Inserting an image in OU Campus can be accomplished by following a few simple steps. Also, an image map can be easily associated with that image. 

Inserting Images

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

Insert Image Button

Click the Insert/Edit Image icon to display the dialog box to use to select the image from the production server. Within the Insert/edit dialog box click the Browse icon to browse to the image to insert.

Browse

 

Clicking Browse displays the OmniBrowser dialog box. Select the image to insert from the list on the left-hand side. Then click the Select File Button. The selected image is shown in the Image Preview window on the right hand side.

OmniBrowser select file

Click the Select File button and the Insert/edit dialog box is shown where it is usually required to add a description for the image.

image description

The image description cannot be blank.

image description warning

After entering the image description click Insert and the image is inserted into the WYSIWYG editor.

image inserted

 

Next Page

 

 

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.

Insert Image Button

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.

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

 

Previous PageNext Page

 

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

Enable 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

Decorative Image Checkbox

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

 

Previous Page

 


Was this page helpful?

Additional Comments:


(Include your email address if you would like a reply)

Procede to http://support.omniupdate.com/