From 35d1609a2bc1e5555521a9f6eb29cf56e91be5b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?T=C3=A9lumire?= <31185220+Telumire@users.noreply.github.com> Date: Sat, 9 Mar 2024 15:39:15 +0100 Subject: [PATCH] Add a warning for potential image map scaling issues + responsive alternative with SVG (#8044) * Add a warning for potential image map scaling issues + alternative with SVG * Update ImageWidget.tid fix phrasing --- .../tw5.com/tiddlers/widgets/ImageWidget.tid | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/editions/tw5.com/tiddlers/widgets/ImageWidget.tid b/editions/tw5.com/tiddlers/widgets/ImageWidget.tid index 0f4bd9012..105a71311 100644 --- a/editions/tw5.com/tiddlers/widgets/ImageWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/ImageWidget.tid @@ -25,6 +25,38 @@ Any content of the `<$image>` widget is ignored. 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. +! Responsive images and `` + +[[Image maps area|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area]] coordinates are numbers of CSS pixels, therefore they do not scale. If you want to use responsive images, you can use a `svg` and `foreignObject`: + + + +[img[Tiddler Fishes.svg]] + + + +Orange fish + + + +Cyan fish + + + +Purple fish + + + +Green fish + + + +Blue fish + + + + + ! Image Status Classes <> The following CSS classes are automatically added to the `` element to indicate the status of the image. Note that only one of these classes will be added at the same time.