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?
On Tuesday, July 13, 2021 at 1:10:27 AM UTC+2 Eric Shulman wrote: > On Monday, July 12, 2021 at 3:11:01 PM UTC-7 [email protected] 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: > <img src="https://www.w3schools.com/html/workplace.jpg"; alt="Workplace" > usemap="#workmap" width="400" height="379"> > <map name="workmap"> > <area shape="rect" coords="34,44,270,350" alt="Computer" > href="#computer"> > <area shape="rect" coords="290,172,333,250" alt="Phone" href="#phone"> > <area shape="circle" coords="337,300,44" alt="Cup of coffee" > href="#coffee"> > </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 name="workmap"> > <area shape="rect" coords="34,44,270,350" alt="Computer" > href="#computer"> > <area shape="rect" coords="290,172,333,250" alt="Phone" href="#phone"> > <area shape="circle" coords="337,300,44" alt="Cup of coffee" > href="#coffee"> > </map> > > Note: > To use the internal image example above, you must download and import the > "workplace.jpg" image: > > 1. open the image URL in your browser: > https://www.w3schools.com/html/workplace.jpg > 2. right click on the image and choose "save image as..." to download > to a local copy > 3. drag the local file into your TiddlyWiki to import it as a tiddler > named "workplace.jpg" > > 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/d8cd9a36-e46a-41b4-8532-afe8a0563612n%40googlegroups.com.
![https://www.w3schools.com/html/workplace.jpg"](https://www.w3schools.com/html/workplace.jpg"){kind=link}
