On Tuesday, July 13, 2021 at 4:32:27 PM UTC-7 [email protected] wrote:
> is it possible to go even further and put one of tiddlywiki's widgets on > top of an image, like a select widget for example? > You can't do that using an HTML image map. However, your question got me thinking about a completely different approach that will let you put ANY content (wikitext, links, widgets, etc.) on top of any image: Try this: <div style="position:relative;width:fit-content;height:fit-content;"> [img[https://www.w3schools.com/html/workplace.jpg]] <div style="position:absolute;top:5em;left:5em;"> <$select field="selection" size="4"> <option>foo bar baz</option> <option>mumble frotz</option> <option>gronk snork</option> <option>snerfle plurm</option> </$select> </div> <div style="position:absolute;top:0;right:0;"> [[SomeTiddler]] </div> <$button style="position:absolute;bottom:0;right:0;"> click me <$action-navigate $to="SomeTiddler" /> </$button> </div> Notes: * The outer div with style="position:relative;width:fit-content;height:fit-content" establishes a top/left (0,0)-based coordinate system with a bottom/right that matches the size of the image * The image can be rendered using the wikitext [img[...]] syntax (since it no longer needs the #usemap syntax) * The inner div with style="position:absolute;top:5em;left:5em" positions content within the relative coordinate system * As shown in the above example, you can place anything you like, anywhere you like simply by using different values for "top", "left", "bottom" or "right" * You can use any CSS dimensions that work for you, such as px, em, cm, in, etc. enjoy, -e -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d4510637-d532-4bd2-a1d9-8cf325c675a5n%40googlegroups.com.
