There are several ways of changing Image Uploader appearance for better integration with your site design. One of them is to change buttons: you may create custom command buttons or simply change the appearance of standard buttons.
To create a custom command button you should hide default buttons using the ShowButtons property and create your own buttons in HTML (for example, using the IMG element). After this, add the onclick event handler for each custom button and call the appropriate method of Image Uploader. Here is a short sample how to do it:
When no images are selected for upload, it makes sense to disable the Send button. To check if Image Uploader has anything to send, use the property named UploadFileCount in the event UploadFileCountChange. If UploadFileCount is 0, you should disable the button, otherwise - enable it.
In Image Uploader, you may also replace its standard button images with your own. To do that you only need to initialize the appropriate properties with suitable values. Here's an example of how to replace a full set of buttons for OnePane layout provided that the appropriate images are in the same directory as the page:
As you may have noticed, an initialization string has the following general syntax:
This string is case insenitive, and of all the variables only Width and Height are necessary. If either of them is omitted, standard buttons will be displayed. If both of them are present and no images are provided, no button will be displayed. If images are provided, they will be resized to the specified dimensions when necessary.
In any given moment every button may be in one of six predefined states, and there is an appropriate variable corresponding to each of the states:
|UrlNormal||The button is not pressed, not hovered over, and not in focus|
|UrlNormalFocused||The button is in focus|
|UrlHover||The button is hovered over|
|UrlHoverFocused||The button is hovered over and in focus|
|UrlPressed||The button is pressed|
|UrlDisabled||The button is disabled|
It is recommended to specify images for all states, though for some states they may be omitted. In this case the last drawn image will be used. You may specify absolute URLs to images as well as relative ones.
Besides standard buttons you can also customize icons that appear on thumbnails and allow manipulating these thumbnails: rotate, preview, and so on. Properties that specify such icons have names ending in IconImageFormat.
An important difference between the icons and the buttons is that the former have only three states: UrlNormal, UrlHover, and UrlPressed.
Keep in mind that every time the user visits the page with
Image Uploader, button images will be
re-downloaded. To avoid this, enable caching of GUI controls using the CacheGuiGraphics property. If its value is set to
true, button images will be stored in browser
Also, do not forget to maintain proper version of custom images via the GuiGraphicsVersion property. When you change these images, increase this value so that Image Uploader automatically updated the cache. Otherwise, users will have to clear the cache manually.