Re: [tw] Re: Imagemap in TW5?

[oleghbond]

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 написав:
>
>
> Not precisely; the way to open a tiddler with an HTML anchor link is to 
>> use a permalink like so:
>>
>> 
>>
>
> Perhaps also interesting...
>
> Using svg instead of a pixel-based image.
>
> Interactive SVG Image Map @ tb5 
> 
>
> Best wishes, Tobias.
>

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/504f219a-fa96-4d9d-a8a8-65f4f5c1b51a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Imagemap in TW5?

[Mat]

@Dave

I've read imagemaps are getting more irrelevant and alternatives are 
proposed instead, see e.g SVG option 
http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG 
and CSS option https://www.youtube.com/watch?v=_YGiMdnEud0. 

:-)

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/278b99b2-31c8-4ccc-8487-bd95eaf74053%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Imagemap in TW5?

[Dave]

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.

On Tuesday, June 16, 2015 at 7:57:43 AM UTC-6, PMario wrote:

 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


-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/531c40f8-4af1-4831-b24f-932d37207955%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Imagemap in TW5?

[PMario]

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

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/5db3ad39-b2d5-4bf5-9e61-a9786438e426%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Imagemap in TW5?

[Dave]

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

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/306d6447-e2d1-45ef-aafe-8cb9c56fec00%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Jon]

Hi Tobias,

I managed to get this working - your additional instruction at Interactive 
SVG Image Map @ tb5 
http://www.google.com/url?q=http%3A%2F%2Ftb5.tiddlyspot.com%2F%23Interactive%2520SVG%2520Image%2520Mapsa=Dsntz=1usg=AFQjCNFDSaZJUZuBThY_SyEf_0qqo81hzQ
 
as to how to wrap the triggering SVG elements was what I needed and it does 
work by wrapping a layer.

Many thanks, Jon.


On Wednesday, 21 January 2015 13:00:22 UTC, Tobias Beer wrote:

 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. 


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

[tw] Re: Imagemap in TW5?

[Tobias Beer]

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

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

Best wishes, Tobias.

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

Re: [tw] Re: Imagemap in TW5?

[Tobias Beer]

 Apologies if this is what you've already done here Interactive SVG Image 
 Map @ tb5 
 http://www.google.com/url?q=http%3A%2F%2Ftb5.tiddlyspot.com%2F%23Interactive%2520SVG%2520Image%2520Mapsa=Dsntz=1usg=AFQjCNFDSaZJUZuBThY_SyEf_0qqo81hzQ
  
 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.

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

Re: [tw] Re: Imagemap in TW5?

[Tobias Beer]

 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.

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

Re: [tw] Re: Imagemap in TW5?

[Tobias Beer]

 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.

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

Re: [tw] Re: Imagemap in TW5?

[Tobias Beer]

 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. 

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

Re: [tw] Re: Imagemap in TW5?

[Jon]

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


On Wednesday, 21 January 2015 10:09:09 UTC, Tobias Beer wrote:

 Apologies if this is what you've already done here Interactive SVG Image 
 Map @ tb5 
 http://www.google.com/url?q=http%3A%2F%2Ftb5.tiddlyspot.com%2F%23Interactive%2520SVG%2520Image%2520Mapsa=Dsntz=1usg=AFQjCNFDSaZJUZuBThY_SyEf_0qqo81hzQ
  
 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.


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

Re: [tw] Re: Imagemap in TW5?

[Jon]

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
On Wednesday, 21 January 2015 12:43:22 UTC, Tobias Beer wrote:

 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.


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

Re: [tw] Re: Imagemap in TW5?

[Jon]

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 http://tb5.tiddlyspot.com/#Interactive%20SVG%20Image%20Map but 
this is too advanced for me and I wondered if the layer thing might be 
easier (for me to do)

Thanks, Jon.

On Saturday, 10 January 2015 17:33:53 UTC, Tobias Beer wrote:


 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 
 http://tb5.tiddlyspot.com/#Interactive%20SVG%20Image%20Map

 Best wishes, Tobias.
  

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

Re: [tw] Re: Imagemap in TW5?

[HansWobbe]

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


On Sunday, January 11, 2015 at 4:47:23 PM UTC-5, Tobias Beer wrote:

 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.


 

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

Re: [tw] Re: Imagemap in TW5?

[HansWobbe]

 Perhaps also interesting...

 Using svg instead of a pixel-based image.

 Interactive SVG Image Map @ tb5 
 http://tb5.tiddlyspot.com/#Interactive%20SVG%20Image%20Map

 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!

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

Re: [tw] Re: Imagemap in TW5?

[Jeremy Ruston]

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=#TiddlerName/

  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.


On Wed, Jan 7, 2015 at 8:45 PM, RunningUtes runningu...@gmail.com wrote:

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

 story.displayTiddler(null,'TiddlerName');

 in TW5?


 On Wednesday, January 7, 2015 12:34:21 AM UTC-8, Tobias Beer wrote:

 Hi c pa,

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

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


 https://lh4.googleusercontent.com/-04cEPdOmr60/VKzvIC2XxhI/Bvo/j9b3J_VFGsw/s1600/nope.jpg

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

 story.displayTiddler(null,'TiddlerName');

 ...which doesn't work in TW5.

 Best wishes, Tobias.

  --
 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 post to this group, send email to tiddlywiki@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.rus...@gmail.com

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

Re: [tw] Re: Imagemap in TW5?

[Tobias Beer]

 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/

javascript:
Perhaps also interesting...

Using svg instead of a pixel-based image.

Interactive SVG Image Map @ tb5 
http://tb5.tiddlyspot.com/#Interactive%20SVG%20Image%20Map

Best wishes, Tobias.
 

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

[tw] Re: Imagemap in TW5?

[Tobias Beer]

Hi c pa,

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

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

https://lh4.googleusercontent.com/-04cEPdOmr60/VKzvIC2XxhI/Bvo/j9b3J_VFGsw/s1600/nope.jpg

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

story.displayTiddler(null,'TiddlerName');

...which doesn't work in TW5.

Best wishes, Tobias.

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

[tw] Re: Imagemap in TW5?

[RunningUtes]

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

story.displayTiddler(null,'TiddlerName');

in TW5?

On Wednesday, January 7, 2015 12:34:21 AM UTC-8, Tobias Beer wrote:

 Hi c pa,

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

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


 https://lh4.googleusercontent.com/-04cEPdOmr60/VKzvIC2XxhI/Bvo/j9b3J_VFGsw/s1600/nope.jpg

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

 story.displayTiddler(null,'TiddlerName');

 ...which doesn't work in TW5.

 Best wishes, Tobias.


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

[tw] Re: Imagemap in TW5?

['c pa' via TiddlyWiki]

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

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