Embedded Image with elements linked to tiddlers

[Andrew Lister]

Hi,

I would like to be able to embed an image that has hotspot elements
that, when clicked, open tiddlers. Is this possible? difficult?

Here's the background:

Up until now, what I've been doing on my course website is putting up
concept maps whose elements link to new pages - I use the 'hotspot'
tool in Dreamweaver, and then the 'Open Browser Window' function, so
that when the element is clicked, it pulls up a small window with
further text or links. (Or I use layers if I want the element to
pop-up a menu of links). Now I'm wondering how much of this I can do
in TW. I've figured out that I can paste html code with an image map
in a tiddler, and the elements of the map succesfully link elsewhere
(an html file in a new browser window). But I don't know how to make
these elements pop-up a tiddler - not a regular html link but a TW
link, if that's the right way to put it.

Thanks

[Eric Shulman]

> I would like to be able to embed an image that has hotspot elements
> that, when clicked, open tiddlers. Is this possible? difficult?

<snip>

> in TW. I've figured out that I can paste html code with an image map
> in a tiddler, and the elements of the map succesfully link elsewhere
> (an html file in a new browser window). But I don't know how to make
> these elements pop-up a tiddler - not a regular html link but a TW

in the image map, instead of

href="http://www.someplace.com/whatever"

try

href="javascript:story.displayTiddler(null,'TiddlerTitle');"

HTH,

-e
Eric Shulman
TiddlyTools / ELS Design Studio

http://www.TiddlyTools.com
"Small Tools for Big Ideas!"

[Andrew Lister]

Worked perfectly the first time. This is going to simplify my life
greatly, and will work nicely with the stepwise-navigation option
(click a concept in the map, get a Tiddler. Click on a new concept in
the map, the Tiddler disappears, and is replaced by a new Tiddler
corresponding to the new concept, but the map is still there. Follow a
link in the new Tiddler, and the map will disappear, but that's fine).

The only visual drawback is that there is no animation, I suppose
because TW doesn't know where to animate the tiddler from.

Thanks again for the speedy response.

[Andrew Lister]

Actually, the stepwise navigation seems not to work out of the map

[Rich Carrillo]

If you want your map to stay up and not flow up and down with the
normal tiddlers, try embedding it in your page template. Similar to the
SideBar or MainMenu, it will be visible and you can open links from it,
but it is not effected by "close all" and stuff like that.

It would look something like <div id='conceptMap'
tiddler='ConceptMap'></div>

-Rich

[Andrew Lister]

That sounds perfect. I'm guessing that I also have to define the
conceptMap div - in StyleSheetLayout?

[Rich Carrillo]

Andrew,

Yes, if it needs any styling. Personally, I try to keep my CSS modular.
I would create a CSS tiddler with your conceptMap rules (lets call it
ConceptMapStyles), add it to the StyleSheet tiddler with
[[ConceptMapStyles]]. This way it will be added to StyleSheetLayout and
StyleSheetColors.

If you create a new StyleSheetLayout, it will overwrite the shadowed
StyleSheetLayout. You problably need a lot of the rules in there. The
normal way of applying styles is using the StyleSheet tiddler. It gets
loaded after StyleSheetLayout and StyleSheetColors, so you can add your
own CSS rules or selectively over-ride any rules in the shadow
tiddlers.

StyleSheet is further extensible by adding other CSS snippets (like
your new ConceptMapStyles) using the double-square-bracket notation.

- Rich

[Andrew Lister]

I think my previous question didn't really make sense. I was missing
"refresh='content'" from the Page Template - that's why it wasn't
working. But I also didn't understand about style sheets, and you've
cleared that up for me too.