CSS image map to trigger macro etc

[Dave]

This is a further refinement of this thread

https://groups.google.com/forum/#!searchin/TiddlyWiki/CSS$20Alternative$20for$20an$20Image$20Map%7Csort:relevance/tiddlywiki/9G2Kv-TQkI0/2eY-4v9zIAAJ


I have this tiddler [[BodyDiagram]]

<h1>a pain diagram</h1>
<div id="bodymap">
        <figcaption>
bla bla bla</figcaption>
                <a href="http://www.yahoo.com/" id="hiker1"></a>
                <a href="http://www.bing.com/" id="hiker2"></a>
                <a href="http://www.google.com/" id="hiker3"></a>
</div>

with the CSS in this stylesheet tagged with $:/tags/Stylesheet:

 body {
            background-color: #ABC;
            color: #123;
            font-family: verdana;
        }
    h1 {
            margin-bottom: 20px;
            text-align: center;
        }
        #bodymap {
                background-image: url(images/BodyDiagram.png);
                width: 449px;
                height: 473px;
                position: relative;
                }
        #bodymap a {
                display: block;
                border: 1px solid #FF2;
                position: absolute;
                }
        #bodymap a:hover {
                border: 1px solid #333;
                }              
        a#hiker1 { width: 50px; height: 50px; left: 82px; top: 25px; }
        a#hiker2 { width: 40px; height: 40px; left: 86px; top: 65px; }
        a#hiker3 { width: 10px; height: 10px; left: 510px; top: 150px }        
        #bodymap figcaption {
        position: absolute;
        top: 0px; left: 0px;
        width: 449px; height: 20px;
        line-height: 20px;
        text-align: center;
        font-weight: bold;
        background-color: rgba(255,255,255,.6);
        }

and it looks like this: (see image provided)



This is still in the process of converting from the original post so that's why the hot spots are referred to as "hiker1" etc...

Question:  While clicking on the square around the head will open a link to Yahoo.com in this example:

(<a href="http://www.yahoo.com/" id="hiker1"></a>)


*** how do I instead make something internal to the TW happen, e.g. trigger a macro of some sort?  ***

My ultimate goal is to click on a square and have a templated new tiddler open up with appropriate fields set with things like "head" and <<today's date>>

Thanks,
Dave

[Mat]

*** how do I instead make something internal to the TW happen, e.g. trigger a macro of some sort?  ***

Maybe the Hooker method can be of use? See the big red button there.

<:-)

[Dave]

That's very interesting!  I'd not seen that before.  I did get it working, and it looks like its relying on Tobias's linkimg macro.  I might be able to modify that to my needs.  This would be a different way of reaching the same goal.  I'd have to build a Frankenstein's monster of images sewn together.  I suppose I could just cut up the original image into pieces and do it that way.

Thank you for that idea!


That said, I'd still prefer to hijack whatever is happening in this:

<a href="http://www.yahoo.com/" id="hiker1"></a>


... but I suppose the whole concept of linking the "id="hiker1"" part with the CSS coordinates in the stylesheet is something that is a part of the html linking function (I am throwing terms around not really knowing what I'm talking about) and perhaps cannot be tied in with any of the tiddlywiki innards???



[Mark S.]

The things you want to do have to be triggered by a button (or one of the other 3 widgets that can send messages).

I notice that the button widget can take a class attribute. So I'm wondering if you could replace the <a> anchors with <$button class="hike1" > with an action of some sort (like creating a new tiddler). You would have to change those references to a#hiker1 to class references like button.hike1.

Something worth trying?

Mark

[Dave]

I figured it part way:

just replace this

<a href="http://www.yahoo.com/" id="hiker1"></a>

with this

<a href="#headTiddler" id="head"></a>

and it opens right up to that tiddler.

Next I need to see if there's a way to pass arguments to a tiddler like that somehow (although this will definitely be workable :)

and just now I see Mark's comment too - I'll give that a try

[Dave]

I tried this:

<div id="bodymap">
        <figcaption>
bla bla bla</figcaption>

                <a href="#headTiddler" id="head"></a>
                <$button class="neck"  tooltip="hello"></button>

                <a href="http://www.google.com/" id="hiker3"></a>
</div>

and this in the CSS:

           #bodymap button {
                display: transparent;

                border: 1px solid #FF2;
                position: absolute;
                }

         
        a#head { width: 50px; height: 50px; left: 82px; top: 25px; }
       button.neck { width: 40px; height: 40px; left: 86px; top: 65px; }

and it made a button in the right spot, but with "</button></div>" spilling out of it downwards.  Also it blocks the image beneath it (bad) but surprisingly it goes transparent when you hover over it.  I'd like it to do that in reverse (be clear unless hovered over), or at least just be clear all the time. (see image)

Any suggestions? (In case it isn't clear, I don't have any training in this)

[Mark S.]

</button> should be </$button>

[Dave]

Thanks - that cleared up the text.

Do you know why this   display: transparent;
doesn't work?


P.S.  I just realized that this method: <a href="#headTiddler" id="head"></a>
only works once while the tiddler doesn't exist, and subsequently nothing happens when you click the hotspot.  If I can get the button thing working right this won't matter, but it would also be cool to get that working too.

Thanks,
Dave

[Dave]

Nevermind question 1:

background: transparent;  (instead of display: transparent)

worked :)

Thanks so much Mark - this is really useful!!

I found this and will be changing it to my specific needs:

<$button class="head"  tooltip="head"><$action-sendmessage $message="tm-new-tiddler" title="This is newly created tiddler" tags={{!!tags}} text=<<now "Today is DDth, MMM YYYY">>/></$button>