Replacing Fields With Icons

Top  Previous  Next

 

You can replace fields in your dataset with an image icon, in order to make your site more attractive and user friendly.  You can use this to insert buttons with icons, eg. "Buy Now" or "Edit", or perhaps, graphics that represent a field value.

 

Example:

You have a field that contains Country,  using this technique you can display a small flag in place of the country name.

 

To Replace Your Data With an Icon:

 

1. Click on the Item Editor button on the toolbar btn_item_Editor_005

 

2. Click on the relevant row of the "Hyperlink" column

 

3. Click the ellipse button btn_ellipse_003

 

4. In the Common section,  Change the display type to "Image".

 

5. Click on the Value Editor (btn_edit_004) button to access the Value Editor Tool.

 

6. Type in the URL of the icon image you wish to display.

If you want to show a "Buy Now" button - you should type;  ./images/buynow.gif .(be careful to specify the correct file path).

 

7. Click on the OK button.

 

- OR -

 

1. Right Click on the page item and select Properties from its popup menu. You will see the Page Item Properties window.

 

2. In the Common section,  Change the display type to "Image".

 

3. Click on the Value Editor (btn_edit_005) button to access the Value Editor Tool.

 

4. Type in the URL of the icon image you wish to display.

If you want to show a "Buy Now" button - you should type;  ./images/buynow.gif .(be careful to specify the correct file path).

 

5. Click on the OK button.

 

Tips:

You can resize the image manually, or uncheck the boxes to allow the image to size automatically.

 

If your image source URL is built from a data value (ie. it depends on the data value), you can insert the field into the URL by double clicking on the field you wish to use. You can also click on the field and press btn_add_Field_003. The field will then appear in the editor box. In this example,  the URL may look like this: "./images/products/[productid].gif". The difference here from the buy button is that the image shown would change to match the product in each row of data.

 

 


See Also

Replacing Fields with Pictures