1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-12 11:10:27 +00:00
TiddlyWiki5/editions/tw5.com/tiddlers/widgets/ImageWidget.tid
Eric Haberstroh 0cd3c9a8ac
Add usemap attribute to image widget (#7634)
* Add usemap attribute to image macro

Allow for a usemap attribute on the $image macro call which is passed through to the resulting img tag. This makes the use of HTML image maps [1] possible.

[1]: <https://www.w3schools.com/html/html_images_imagemap.asp>

* Document new usemap attribute in ImageWidget

* Update version docs

---------

Co-authored-by: Jeremy Ruston <jeremy@jermolene.com>
2023-11-21 11:44:39 +00:00

44 lines
2.0 KiB
Plaintext

caption: image
created: 20140416160234142
modified: 20231121114351165
tags: Widgets
title: ImageWidget
type: text/vnd.tiddlywiki
! Introduction
The image widget displays images that can be specified as a remote URL or the title of a local tiddler containing the image.
! Content and Attributes
Any content of the `<$image>` widget is ignored.
|!Attribute |!Description |
|source |The URL of the image, or the title of an image tiddler |
|width |The width of the image |
|height |The height of the image |
|tooltip |The tooltip to be displayed over the image |
|alt |The alternative text to be associated with the image |
|class |CSS classes to be assigned to the `<img>` element |
|loading|<<.from-version "5.2.3">>Optional. Set to `lazy` to enable lazy loading of images loaded from an external URI |
|usemap|<<.from-version "5.3.2">>Optional usemap attribute to be assigned to the `<img>` element for use with HTML image maps |
The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image.
! Image Status Classes
<<from-version "5.2.2">> The following CSS classes are automatically added to the `<img>` element to indicate the status of the image. Note that only one of these classes will be added at the same time.
|''tc-image-loading'' |When the image is being loaded |
|''tc-image-loaded'' |The image has been loaded successfully |
|''tc-image-error'' |The image could not be loaded |
! External Images and the ''_canonical_uri'' field
When used to display tiddler-based images, the image widget operates in two distinct modes:
* If the ''_canonical_uri'' field is present then it is used as the ''src'' attribute of the generated `<img>` element and the ''text'' field is ignored
* Without the ''_canonical_uri'' field, the image widget generates an `<img>` element that embeds the image data directly using a `data:` URI.
See ExternalImages for more details.