[tw5] Re: Link in Img

[Eric Shulman]

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:
<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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/152e78fd-c8d1-463e-b7a4-bb90cfcb206an%40googlegroups.com.