So, I've done an enormous amount of tweaking, and I have something that
mostly works, for my purposes, which has been attached. The global
stylesheet is as follows:
.image {
max-width: 100%;
}
.hover {
opacity: .4 !important;
transition: .1s ease
}
.hover:hover {
opacity: 1 !important;
}
.circle {
opacity: .70 !important;
fill-opacity: .70 !important;
}
.text{
fill: #fff;
stroke-width: 0.1;
stroke: #000;
}
.red{
fill: #800000;
}
.blue{
fill: #008080;
}
.green{
fill: #008000;
}
.dark-blue{
fill: #0e0e72;
}
.purple{
fill: #800080;
}
.yellow{
fill: #808000;
}
As of right now, the background image does not scale with window-width,
though the SVG elements do.
Additionally, items in the 'text' class will shift slightly up and to the
left when their zone is hovered over, but not for *all *images. For
example, download the svg and hover over the 'Lake Zarovich' area, and
compared that to the 'Castle Ravenloft' area. On my computer at least, the
Ravenloft text shifts when hovered, but the Lake text does not.
I've edited my original response, so that if someone comes across this post
in the future, they'll be able to get to the core of the issue, which is
the content type.
However, I'd still like your help in better syncing up the background
image, and in figuring out this weird jiggly business. Oh, also! Is there
any way to use a relative filepath, or better yet a Tiddler, as the
background image, rather than an absolute filepath?
This isn't an issue for this image, but it does play a part in my project:
is there a way to "crop" an svg, so that the image and background are still
lined up with each other, but the actual window displayed is just a small
portion? And is there a way to do this without stretching the image in any
way?
On Tuesday, July 9, 2019 at 3:42:03 AM UTC-6, A Gloom wrote:
>
> Attached is a tiddler with edits I did to the ladt four hover zones for
> high lighting and links. Its in plain text since its not a complete svg but
> the code can be copy and pasted into a svg.
>
> Its done with light colors on dark background cause I can't work with
> light backgrounds due to my eyes
>
>
> Here's one for example
>
> <g><a href="#Van_Richten_Tower">
> <path class="hoverz1"
>
> style="stroke:none;stroke-width:0.06992456px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
> d="m 476.58257,404.90664 c 0.97519,1.93218 2.57802,3.7967
> 4.59124,4.59124 2.60767,1.02916 5.69433,0.4307
> 8.4055,-0.28254 3.54424,-0.93239 8.40814,-1.67438 9.74756,-5.08568
> 1.23293,-3.14011 -1.31075,-6.87948
> -3.39046,-9.53565 -1.94848,-2.48857 -4.78182,-4.78269 -7.91106,-5.22696
> -2.58795,-0.36741 -5.35419,0.82014
> -7.48726,2.33094 -2.25185,1.59494 -4.27418,3.9628 -4.94441,6.63964
> -0.53782,2.14804 -0.009,4.59218
> 0.98889,6.56901 z"
> id="Van_Richten_Tower"
> inkscape:connector-curvature="0"
> sodipodi:nodetypes="aaaaaaaaa"
> inkscape:label="Van Richten's Tower" /><title>Van Richten
> Tower</title></a></g>
>
> the <g></g> is for the tooltip -- the <title> if you want tooltips with your
> mouse over.
> If thats something you wouldn't want, remove <g><title>Van Richten
> Tower</title></g>
>
> the <a href="#Van_Richten_Tower"> </a> is for links to tiddlers-- all you
> need is #tiddlername
> if used in a svg tiddler
>
> the class name "hoverz1" is for mouse over-- in CSS you use hover for styling
>
> normally you also define the normal (non hover) state along with the hover in
> the style section
> but for some reason I didn't have to with your example file.
>
> <style>.hoverz1:hover {fill:white;}</style>
> <-- put before <defs> at top of file -->
>
> Important thing is you have to remove any matching styling on the elements
> that you define
> in the style section-- I had to take the opacity and fill-opacity off of each
> element I geve the hover
> effect class to.
>
> Also if you want the hover effect to work indeprndently for each hover zone,
> they get the class not a group--
> if the group gets it then each hover zone of that group will cause the rest
> of the group also to high light.
> So grouping a hover zone with its text as a pair and giveing their group the
> class would eork-- experimenting
> will show you what works. Though with a file this large you're probably
> getting typing lag if you have the
> editor preview window open. If your file length is causing your preview
> window to disappear off screen, set
> the editor window size to 600 in the editoe toolbar.
>
>
--
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 [email protected].
To post to this group, send email to [email protected].
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/1cc3b4ef-b9ea-4506-9def-71d03cd622de%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
