Interaction between a Table and a SVG-Graphic ?

Explorer ,
Sep 11, 2017 Sep 11, 2017

Copy link to clipboard

Copied

Hi

I just discovered Muse and I very like the concept behind it.

How would you solve an interaction between a Table (prices, ...) and a SVG-Graphic (houses) like this ?

Angebote «Wydenmatt» - Natürlich, Lebendig, Peiswert

I know a bit about the structure of the SVG-Graphic, but I have no idea how to manipulate the SVG-Elements (change Fillcolor or move Elements).

Does somebody know how to basically solve this kind of tasks ?

Kind regards

Alain

Views

259

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Guide , Sep 12, 2017 Sep 12, 2017
__Alain__  написал(а)The last sentence of your answer is the most important to my question.If it isn't possible in Muse, how to solve the task ? Coding by hand ? Or ist there any Widget ?
This works on svg + javascript. There are no visual editors to create this. You need to hire a web programmer and the result of his work you can insert into the Muse.

Likes

Translate

Translate
LEGEND ,
Sep 11, 2017 Sep 11, 2017

Copy link to clipboard

Copied

This is a little bit tricky, but to a certain degree of complexity it works.

Look at this sample site:https://www.dropbox.com/s/qt9t4bxr37xvfwp/Interaktive_Tabelle.muse?dl=0

Be aware, that this .muse file is created with Muse 2017.1, what means, that you can’t open it with an older Muse version.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 11, 2017 Sep 11, 2017

Copy link to clipboard

Copied

Thanks for your file.

What do you wanna tell me with that file ?

I cannot find any interaction between the table and a SVG-File - maybe I'm just to blind to see ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 11, 2017 Sep 11, 2017

Copy link to clipboard

Copied

  • The first problem is to build a table.
  • The second problem is, to make complete rows and/or single cells reactive on mouseactions.

This works, as you can see.

Here a modified example, with 2 „interactive“ elements (window, pop up) built in. I hope, you now can see, „what I wanna tell you“, and you will find these elements: https://www.dropbox.com/s/qt9t4bxr37xvfwp/Interaktive_Tabelle.muse?dl=0

The file is about interacting table cells/rows with pop up windows and/or links, just similar to your linked sample site.

Changing parts of a graphic element by clicking on table rows/cells, isn’t possible in Muse.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 12, 2017 Sep 12, 2017

Copy link to clipboard

Copied

The last sentence of your answer is the most important to my question.

If it isn't possible in Muse, how to solve the task ? Coding by hand ? Or ist there any Widget ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 12, 2017 Sep 12, 2017

Copy link to clipboard

Copied

Ok __Alain__. Then take this (different approach; only „out of the box“ tools):

http://interactive-table.businesscatalyst.com/index.html

It is a little tricky to build, but with some experience in using Muse, it is even possible to make this responsive.

Interactivity is only possible in one direction: table -> image, not the other way round (image -> table).

And be aware: The sample is a sample, what means: No extensive styling of the elements.

You may download the .muse file from the sample site.

And: No SVGs in this sample site, but this wouldn’t make any difference. It works with JPGs, PNGs and SVGs.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 12, 2017 Sep 12, 2017

Copy link to clipboard

Copied

But it has to work in both directions (table <-> SVG-graphic).

Conclusion: No way in Muse ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 12, 2017 Sep 12, 2017

Copy link to clipboard

Copied

Thank you so much for your questions!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Sep 12, 2017 Sep 12, 2017

Copy link to clipboard

Copied

LATEST

__Alain__  написал(а)

The last sentence of your answer is the most important to my question.

If it isn't possible in Muse, how to solve the task ? Coding by hand ? Or ist there any Widget ?

This works on svg + javascript. There are no visual editors to create this. You need to hire a web programmer and the result of his work you can insert into the Muse.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines