Difference between revisions of "ImageLink"
Line 6: | Line 6: | ||
{{UI Object Parameter (image)}} | {{UI Object Parameter (image)}} | ||
{{UI Object Parameter (position)}} | {{UI Object Parameter (position)}} | ||
− | *'''size''':the image's width and height | + | *'''size''': the image's width and height |
− | *'''page''':the name of the destination page when you click the image. It is | + | *'''page''': the name of the destination page when you click the image. It is |
possible to specify an absolute or relative URL in the ''page'' parameter. The tag will work as an <A HREF> tag, loading the new page. If the loaded page is an HSYCO menu, the ''back'' link will show up in the menu page, to reload the referrer page | possible to specify an absolute or relative URL in the ''page'' parameter. The tag will work as an <A HREF> tag, loading the new page. If the loaded page is an HSYCO menu, the ''back'' link will show up in the menu page, to reload the referrer page | ||
− | *'''label''':the image's label | + | *'''label''': the image's label |
− | *'''css''':the label's css attributes | + | *'''css''': the label's css attributes |
{{Note: IMG Filename}} | {{Note: IMG Filename}} |
Revision as of 15:21, 28 January 2014
A clickable image from the www/img directory. You can add an optional label text next to the image, and define several optional CSS attributes to control the text’s format and position. The “top” CSS attribute is used to move the text from its default position. If top is not defined, the text will be located just below the image. If defined, you can specify a positive or negative offset, in pixels. The zero offset position is at the top corner of the image; a positive offset moves the text down, a negative offset moves the text up.
Parameters
- id: the object's ID, used by UISets
- image: image filename
- position: the object's position. Use the pixels or rows and columns coordinates format
- size: the image's width and height
- page: the name of the destination page when you click the image. It is
possible to specify an absolute or relative URL in the page parameter. The tag will work as an <A HREF> tag, loading the new page. If the loaded page is an HSYCO menu, the back link will show up in the menu page, to reload the referrer page
- label: the image's label
- css: the label's css attributes
If the filename is set with a UISet, it's possible to load an image from the web by entering the URL, or a path relative to www/<skin's name>/pic by specifying /pic/ followed by the filename
Syntax
(imagelink<!id> <image's filename>; <position>; <width>; <height>; <page>; <label>; <css>)
E.g.
(imagelink myimage.png; r8c7; 100; 100; page1; Label; (font-style:italic; top:-15px))
UI Attributes
Common attributes
Name | Value | Description |
---|---|---|
pos | x<x>y<y> | Position specified as x/y coordinates. E.g. x-5y10 |
visible | true | Default. Show the object |
false | Hide the object | |
blink | true | slow | Blink the object at a slow speed |
fast | Blink the object at a fast speed | |
false | Stop the blinking | |
opacity | 0.0 ... 1.0 | Object opacity from 0 (not visible) to 1 (fully visible) |
rotation | 0 ... 360 | Object rotation in degrees. Images are rotated around the center point, all other objects are rotated around the top left corner |
Image attributes
Name | Value | Description |
---|---|---|
img | <full url (http://...)> | Set the image source |
<path relative to the project's img/ path> | ||
<empty string> | Empty picture | |
draw | <draw instructions> | Draws the image. See the Draw API
e.g.: line(0,100,20,50,blue);line(50,50,70,70,'255,10,150'); |
legacymode | true | To use with the draw attribute. Enables a compatibility mode that allows draw instructions on old browsers. It works by sending instructions to the HSYCO server that generates an image. For this reason it's slower. |