Imagemap in TW5?

RunningUtes

unread,

Jan 6, 2015, 10:30:15 AM1/6/15

to tiddl...@googlegroups.com

Under the old TW format, imagemaps worked.

When will image maps or inline HTML be added? for example, using the javascript:story.displayTiddler(null,'TiddlerName'); option

[>img[image.jpg]
<HTML>
<img src="image.jpg" width="455" height="354" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="160,16,336,77" href="http://location.com" target=new/>
<area shape="rect" coords="159,82,230,154" href="javascript:story.displayTiddler(null,'TiddlerName');"/>
</map>
</HTML>

c pa

unread,

Jan 6, 2015, 9:47:24 PM1/6/15

to tiddl...@googlegroups.com

This works: Demo at : http://cpashow.tiddlyspot.com/#ImageMap%20test

<HTML>
<img src="http://sci8.com/wp-content/uploads/2014/10/test-all-the-things.jpg" width="455" height="354" border="0" usemap="#map" />
<map name="map" id="map">

Tobias Beer

unread,

Jan 7, 2015, 3:34:21 AM1/7/15

to tiddl...@googlegroups.com

Hi c pa,

Perhaps not the most intuitive example in terms of where to click. ^^

And then there is this on win / chrome...

Mostly, though, this bit is TWc code...

story.displayTiddler(null,'TiddlerName');

...which doesn't work in TW5.

Best wishes, Tobias.

RunningUtes

unread,

Jan 7, 2015, 3:45:30 PM1/7/15

to tiddl...@googlegroups.com

I have it working under TWc, just not under TW5. Is there an equivalent method similar to

story.displayTiddler(null,'TiddlerName');

in TW5?

Jeremy Ruston

unread,

Jan 10, 2015, 9:25:40 AM1/10/15

to TiddlyWiki

Hi RunningUtes

> Is there an equivalent method similar to story.displayTiddler(null,'TiddlerName'); in TW5?

Not precisely; the way to open a tiddler with an HTML anchor link is to use a permalink like so:

> <area shape="rect" coords="159,82,230,154" href="javascript:story.displayTiddler(null,'TiddlerName');"/>

It's actually a bug that javascript URLs work in HTML anchor links. The goal is to filter out all executable Javascript. Otherwise we'd have a major security obstacle to sharing tiddler content: any wikitext tiddler could contain malicious JS that steals your data.

I've created a ticket:

https://github.com/Jermolene/TiddlyWiki5/issues/1350

Best wishes

Jeremy.

--
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+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

Tobias Beer

unread,

Jan 10, 2015, 12:33:53 PM1/10/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

Not precisely; the way to open a tiddler with an HTML anchor link is to use a permalink like so:

<area shape="rect" coords="159,82,230,154" href="#TiddlerName"/>

Perhaps also interesting...

Using svg instead of a pixel-based image.

Interactive SVG Image Map @ tb5

Best wishes, Tobias.

HansWobbe

unread,

Jan 11, 2015, 3:21:56 PM1/11/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

Perhaps also interesting...

Using svg instead of a pixel-based image.

Interactive SVG Image Map @ tb5

Best wishes, Tobias.

+1 for "effective insight" re svg.
+1 for a demo with "ease of understanding"

:-) Bonus marks still available for "ease of installation"

Thanks for sharing this!

Tobias Beer

unread,

Jan 11, 2015, 4:47:23 PM1/11/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

Hi Hans,

:-) Bonus marks still available for "ease of installation"

That's the thing... svg is like HTML, a little... so either you get those ready-made svg images that you want to use, or you need to hands-on build them from scrath (cumbersome, with loads of unnecessary markup, a bit like MS Word).

An alternative would be to rather use something like FontAwesome to "just use".

http://fontawesome.tiddlyspot.com

Best wishes, Tobias.

HansWobbe

unread,

Jan 13, 2015, 9:03:56 PM1/13/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

Tobias:

Thanks for suggesting fontAwesome. I simply hadnt thought of it in this context, perhaps because I've been pondering the use of Inkscape. I suspect fontAwesome will be better for "Quick & Dirty" solutions, but I don't have enough experience with either to be able to make a judgement at this time.

Cheers,
Hans

Jon

unread,

Jan 20, 2015, 4:16:35 PM1/20/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

Hi Tobias,

I have very limited knowledge of css etc. but have created some drawings using SVG-edit after you recommended it.

I've noticed that if you move particular elements of the drawing to individual layers, the layer name appears when you hover over the element in the tiddler.

Would it be easy to somehow introduce a reference to another tiddler at the layer part of the code so that clicking on that part of the image would open the other tiddler?

Apologies if this is what you've already done here Interactive SVG Image Map @ tb5 but this is too advanced for me and I wondered if the layer thing might be easier (for me to do)

Thanks, Jon.

Tobias Beer

unread,

Jan 21, 2015, 5:09:09 AM1/21/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

Apologies if this is what you've already done here Interactive SVG Image Map @ tb5 but this is too advanced for me and I wondered if the layer thing might be easier (for me to do)

What you want to do is precisely what you see in the example above. It only looks complicated because I perhaps didn't chose the simplest SVG... which might have been better. So, thre's that "noise".

Anyhow, I have added some more explanations, especially on how to turn an svg element into a clickable link.

Best wishes, Tobias.

Jon

unread,

Jan 21, 2015, 7:19:44 AM1/21/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

Hi Tobias,

I'll study it when I get home but from a quick look, I suspect I'll still have a problem with this bit: "assign classes to the elements you wish to style..."

How do you select a particular part of the graphic to then assign a class to it?

Thanks, Jon

Tobias Beer

unread,

Jan 21, 2015, 7:39:19 AM1/21/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

How do you select a particular part of the graphic to then assign a class to it?

By being able to read from the svg markup which elements do what.

Not sure if there is some application that would highlights

precisely which part of the svg markup renders which element on the canvas.

Best wishes, Tobias.

Tobias Beer

unread,

Jan 21, 2015, 7:43:22 AM1/21/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

Not sure if there is some application that would highlights
precisely which part of the svg markup renders which element on the canvas.

Well, actually, what you can use are the developer tools that come with your browser!

Best wishes, Tobias.

Jon

unread,

Jan 21, 2015, 7:53:42 AM1/21/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

Hi Tobias,

That's why I was wondering if you could use the layer feature of SVG-edit.

It's very easy to assign an element of a graphic to a layer and give it a name.

As I mentioned before, the layer name then appears if you hover over it when the graphic is in a tiddler, so presumably it would be possible to use that same reference within the code to make it clickable...?

Thanks, Jon

Tobias Beer

unread,

Jan 21, 2015, 8:00:22 AM1/21/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

As I mentioned before, the layer name then appears if you hover over it when the graphic is in a tiddler, so presumably it would be possible to use that same reference within the code to make it clickable...?

Ok, now I get it. Yes, that sounds like it should work.

I guess, uppermost layers will have click-preference.

Best wishes, Tobias.

Jon

unread,

Jan 21, 2015, 12:44:51 PM1/21/15

to tiddl...@googlegroups.com, jeremy...@gmail.com

Hi Tobias,

I managed to get this working - your additional instruction at Interactive SVG Image Map @ tb5 as to how to wrap the triggering SVG elements was what I needed and it does work by wrapping a layer.

Many thanks, Jon.

Tobias Beer

unread,

Jan 21, 2015, 6:14:14 PM1/21/15

to tiddl...@googlegroups.com

Also here, using the location hash given via the permalink command seems to work fine...

http://tb5.tiddlyspot.com/#ImageMaps

Best wishes, Tobias.

Dave

unread,

Jun 16, 2015, 1:42:17 AM6/16/15

to tiddl...@googlegroups.com

Just wondering, with either method of image mapping mentioned here, would it be possible to execute some javascript instead of open a tiddler that's linked to that spot?

thanks,
Dave

PMario

unread,

Jun 16, 2015, 9:57:43 AM6/16/15

to tiddl...@googlegroups.com

On Tuesday, June 16, 2015 at 7:42:17 AM UTC+2, Dave wrote:

Just wondering, with either method of image mapping mentioned here, would it be possible to execute some javascript instead of open a tiddler that's linked to that spot?

Hi Dave,
What do you want to achieve?
TW filters javascript from user content due to security reasons. You need to create js-macros or tw widgets, if you want to execute code.
-m

Dave

unread,

Jun 18, 2015, 12:20:42 AM6/18/15

to tiddl...@googlegroups.com

I'd like to have an image of e.g. the back of the shoulder and when you click on a certain muscle a field in a tiddler somewhere corresponding to that muscle would get modified appropriately.

What would be even cooler would be to have a way to change the image to match the modification (or a series of several modifications that cycle through, say, 4 different options of clicks and field/image changes.

Mat

unread,

Jun 18, 2015, 8:22:11 AM6/18/15

to tiddl...@googlegroups.com

@Dave

I've read imagemaps are getting more irrelevant and alternatives are proposed instead, see e.g SVG option and CSS option.

<:-)

oleghbond

unread,

Feb 23, 2018, 7:38:33 AM2/23/18

to TiddlyWiki

Certainly interactive SVG image map is very attractive technique. However, I encountered certain difficulties - https://groups.google.com/forum/#!topic/tiddlywiki/HxZbVDHpw5c

When I tried to insert an external SVG-file with hyperlinks in it by dragging-and-dropping the result was also negative.

Does somebody have any idea what's the matter?

субота, 10 січня 2015 р. 19:33:53 UTC+2 користувач Tobias Beer написав:

Reply all

Reply to author

Forward