Link in Img

paulgilbert2000

unread,

Jul 12, 2021, 6:11:01 PM7/12/21

to TiddlyWiki

Hi,

i am trying to do a wireframe for a portal i use , and wantto put multiple links on top of their respective positions in an image taken from the portal, to simulate a user journey,

and was wondering if it is it possible to put a a link on top of an image,

I am able to add images to tiddlers , but not sure if i can put a link for another tidler on the foreground of an Image?

Eric Shulman

unread,

Jul 12, 2021, 7:10:27 PM7/12/21

to TiddlyWiki

On Monday, July 12, 2021 at 3:11:01 PM UTC-7 Mohamed...@hotmail.com wrote:

i am trying to do a wireframe for a portal i use , and want to put multiple links on top of their respective positions in an image taken from the portal, to simulate a user journey,
and was wondering if it is it possible to put a link on top of an image

You can use HTML Image Maps to do this.

see https://www.w3schools.com/html/html_images_imagemap.asp for basic HTML usage.

In TiddlyWiki, you can apply the image map to an external image, like this:

</map>

Note that the href="..." parameters start with "#", so that they point to tiddlers within the current file, rather than separate URLs

You can also apply the image map to an internal image, like this:

<$wikify name="srcimg" text="<<datauri workplace.jpg>>">

<img src=<<srcimg>> alt="Workplace" usemap="#workmap" width="400" height="379">

</$wikify>

</map>

Note:

To use the internal image example above, you must download and import the "workplace.jpg" image:

open the image URL in your browser: https://www.w3schools.com/html/workplace.jpg
right click on the image and choose "save image as..." to download to a local copy
drag the local file into your TiddlyWiki to import it as a tiddler named "workplace.jpg"

enjoy,

-e

paulgilbert2000

unread,

Jul 13, 2021, 7:32:27 PM7/13/21

to TiddlyWiki

Thanks eric,

is it possible to go even further and put one of tidly wikis widgets on top of an image, like a select widget for example?

Eric Shulman

unread,

Jul 14, 2021, 12:01:15 AM7/14/21

to TiddlyWiki

On Tuesday, July 13, 2021 at 4:32:27 PM UTC-7 Mohamed...@hotmail.com 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:

[img[https://www.w3schools.com/html/workplace.jpg]]

<$select field="selection" size="4">

<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.