Interaction between a Table and a SVG-Graphic ?

[__Alain__]

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

[Günter Heißenbüttel]

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.

[__Alain__]

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 ?

[Günter Heißenbüttel]

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

[__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 ?

[Günter Heißenbüttel]

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.

[__Alain__]

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

Conclusion: No way in Muse ?

[Günter Heißenbüttel]

Thank you so much for your questions!

[Pavel_Homeriki · Accepted solution]

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