Links in images
10 views
Skip to first unread message
FrD
Dec 22, 2008, 12:29:18 PM12/22/08
to TiddlyWiki
Hello,
I'm beginning a TW with some informations on the chinese meridians.
I have images of each meridian. Each image have some points drawn on
it.
For instance the lung meridian has eleven points from LU1 to LU11.
I'd like that when I click on the point a tiddler opens in the TW with
the name of the point, say LU1 where I have put some informations on
this point.
I've tried with some html stuf, the "map" instruction. But the result
is not the one expected. I'm only able to open a new window with the
tiddler, because I use the permaview option.
May be it's possible with invisible buttons on the image ?
But that's too smart for me.
I would then appreciate some help !
Thanks in advance.
FrD
I'm beginning a TW with some informations on the chinese meridians.
I have images of each meridian. Each image have some points drawn on
it.
For instance the lung meridian has eleven points from LU1 to LU11.
I'd like that when I click on the point a tiddler opens in the TW with
the name of the point, say LU1 where I have put some informations on
this point.
I've tried with some html stuf, the "map" instruction. But the result
is not the one expected. I'm only able to open a new window with the
tiddler, because I use the permaview option.
May be it's possible with invisible buttons on the image ?
But that's too smart for me.
I would then appreciate some help !
Thanks in advance.
FrD
Ken Girard
Dec 22, 2008, 1:23:28 PM12/22/08
to TiddlyWiki
Use [img[imageurl][tiddlername]] rather then the full path to the
tiddler.
In your case something like
[img[http://fakesite.com/images/LU1.jpg][LU1]]
will open the LU1 tiddler
Ken Girard
tiddler.
In your case something like
[img[http://fakesite.com/images/LU1.jpg][LU1]]
will open the LU1 tiddler
Ken Girard
FrD
Dec 22, 2008, 1:40:47 PM12/22/08
to TiddlyWiki
On 22 déc, 19:23, Ken Girard <ken.gir...@gmail.com> wrote:
> Use [img[imageurl][tiddlername]] rather then the full path to the
> tiddler.
> In your case something like
> [img[http://fakesite.com/images/LU1.jpg][LU1]]
> will open the LU1 tiddler
>
> Ken Girard
>
But how can I put many links on an image ?
I mean there are 11 points and I'd like to have 11 little "sensitive"
areas each at a precise position and each linking to a different
tiddler.
In my example : 11 links to the tiddlers 1LU1 to LU11.
FrD
okido
Dec 22, 2008, 2:03:10 PM12/22/08
to TiddlyWiki
Hi FrD,
You might be looking for something called image maps.
An image gets an overlay with dots, circles, square matrix etc that
become objects that can be used to navigate to url's/tiddlers?
You can create them with Gimp, but I have no experience with usage of
image maps in TW.
Have a nice day, Okido
You might be looking for something called image maps.
An image gets an overlay with dots, circles, square matrix etc that
become objects that can be used to navigate to url's/tiddlers?
You can create them with Gimp, but I have no experience with usage of
image maps in TW.
Have a nice day, Okido
okido
Dec 22, 2008, 2:36:20 PM12/22/08
to TiddlyWiki
Hi FrD,
I gave it a quick try, you can use image maps.
Take the code GIMP creates and put it into a tiddler and put it
between <html> </html> tags.
Change the href="file:///etc .....link to tiddler".
Setback is that the image is stored outside the TW.
Have a nice day, Okido
I gave it a quick try, you can use image maps.
Take the code GIMP creates and put it into a tiddler and put it
between <html> </html> tags.
Change the href="file:///etc .....link to tiddler".
Setback is that the image is stored outside the TW.
Have a nice day, Okido
FrD
Dec 22, 2008, 2:39:51 PM12/22/08
to TiddlyWiki
Hi,
I've made some progress.
I create a custom class, for instance :
.imgpos{position:relative; top: 50px; left: 50px;}
It is the precise position where the little transparent box must be
drawn on the meridian image.
And in the lung meridian tiddler where there is an image of the
meridian I write :
{{imgpos{[img[file:./images/icon-transp.png][LU1]]}}}
[img[Méridien Poumon|file:./images/lu_meridian.GIF]]
The first line draws the transparent smal icon at the right position.
The second line draws the meridian.
The difficulty is that I have to create a csutom class for each point.
The lung meridian has 11 points.
But the total of the acupuncture points is about 360 !!!
FrD
I've made some progress.
I create a custom class, for instance :
.imgpos{position:relative; top: 50px; left: 50px;}
It is the precise position where the little transparent box must be
drawn on the meridian image.
And in the lung meridian tiddler where there is an image of the
meridian I write :
{{imgpos{[img[file:./images/icon-transp.png][LU1]]}}}
[img[Méridien Poumon|file:./images/lu_meridian.GIF]]
The first line draws the transparent smal icon at the right position.
The second line draws the meridian.
The difficulty is that I have to create a csutom class for each point.
The lung meridian has 11 points.
But the total of the acupuncture points is about 360 !!!
FrD
Ken Girard
Dec 22, 2008, 2:46:21 PM12/22/08
to TiddlyWiki
A "low tech, not really complex picture" way to do it would be to have
multiple images.
[img[LU1.jpg][LU1]][img[LU2.jpg][LU2]][img[LU3.jpg][LU3]]
[img[LU4.jpg][LU4]][img[LU5.jpg][LU5]][img[LU6.jpg][LU6]]
okido - thanks, I didn't know GIMP could do that.
http://www.gimp.org/
Ken Girard
> > > FrD- Hide quoted text -
>
> - Show quoted text -
multiple images.
[img[LU1.jpg][LU1]][img[LU2.jpg][LU2]][img[LU3.jpg][LU3]]
[img[LU4.jpg][LU4]][img[LU5.jpg][LU5]][img[LU6.jpg][LU6]]
okido - thanks, I didn't know GIMP could do that.
http://www.gimp.org/
Ken Girard
>
> - Show quoted text -
Reply all
Reply to author
Forward
0 new messages