Hello!

It's my first complex SVG drawing. I tried to make an interactive picture so try the buttons

http://norbekov.kz/files/e50/E-50-23.svg

What do you say?

Welcome to InkscapeForum!

OMG, that is awesome!! Very nice work!

We've had a few people posting messages here recently, asking how to do that kind of thing. Responses were pretty sparse, and I only understand the general concept. If you were at all motivated to write one, I'm sure a lot of people would find a tutorial very useful -- even if it's just the basic general steps. I know I would! Or if you've happened to find a tutorial somewhere, could you share the link?

Anyway, congrats on a successful project

Ok. It's quite simple. Just a bit of JS and CSS.

Yes please!!
I would really appreciate some guidance in how to do images like the one you did, it would be very helpful for me and my students.
If you find the time to write down some instructions, I will be very grateful
And congrats for the work!

Sorry for long pause.

Now I tell you how I made this interactive drawing.
At first, it was ordinary SVG picture of a fictional fighter:



I decided to add some details and explore new SVG possibilities.

Step 1: divide drawing into several layers: Open layers panel Shift+Ctrl+L and click Create new layer button
Give layer a name and move there a part of image. Use Cut and Paste in Place for covinience.

For example, "p-top" layer contains only this:


And "internals" layers contains only this:


And complete layers list looks that way:


Note that "Buttons" layers contains two sublayers "on" and "off".

Thanks for that Eldarado

I think we probably expected that you used layers. It's more the code that you used and how you made the links work, that we were after (or at least what I was interested in). How does clicking the button object cause some layers to close and others to open. For example, I know how to make an object into a link. But I don't know how to make the object clickable or an active link. I know it's in the code, but I don't know how to write code. I guess I was hoping that you had found some ready made bits of code that you could tell us about (or show us).

Maybe for a start, did you use javascript or XML only?

Or maybe I've posted before you've finished?

Well, yes, I split it all to several posts.

Step 2: Now I want to let the people to see what's inside the plane. I need X-Rays!
As you know SVG supports DOM, CSS and JS, so I'll do this using CSS property opacity:
opacity:1.0; — means no opacity, opacity:0.5; — means 50% opacity.
And of course there will be a bit of simple JS code.

To apply CSS properties I need to group objects in "p-top" layer and identify that group. Group objects with Ctrl+G, select that group and press Shift+Ctrl+O to open Object properties window:

Type object id into Id field (highlighted with blue border). I use ID "plane-t". To apply chenges click Set button (pointed by blue arrow). Note the red arrow. It point to roll-down section "Interactivity". I'll use it later.

I gave id's to all objects that involved into interactivity.

And now time for buttons!

Step 3: buttons.

In SVG any object can be a "button" but I use classic appearence: a rectangle with a text over it. Rectangle and text grouped into an object — a button:
Each button has a unique ID.

Actually there are two buttons for "on" and "off" states. They split into different layers and positioned so that "on-button" obscures "off-button":

Now add some JavaScript magic.

Select "x-ray" button on "on" layer and press Shift+Ctrl+O to open Object properties window. Set its ID to "x-ray-on" — it will be used later (don't forget to press "Set" button).
Then click "Interactivity" button (remember red arrow?) Window will stretch down and you'll see event lines:


I need two of them: onclick and onmouseover.

In "onclick" field I write this code:
this.style.display='none';
document.getElementById("plane-t").style.opacity = "0.5";
It makes two things. First line hides the on-button you clicking and thus reveals corresponding off-button. Second line applies to "plane-t" object 50% opacity.
Details for code.
First line. Word "this" points to object that recieves event: a button. Word "style" points to style properties of an object. Word "display" is a property that represents same CSS property. Word 'none' is a value of property that makes object invisible.
Second line. Word "document" refers to an object of whole SVG file. "getElementById" is a function (or method) of the "document" object. That method points to a specific object inside. So 'document.getElementById("plane-t")' is an object with ID "plane-t" — I made it earlier at Step 2.

Now I need to write code for off button. It's easy. Hide "on" layer. Select off-button, open Object properties window (Shift+Ctrl+O), and click "Interactivity". In "onclick" field write this code:
document.getElementById('x-ray-on').style.display='inline';
document.getElementById("plane-t").style.opacity = "1";
Details for code.
document.getElementById('x-ray-on') refers to on-button that must be shown to hide off-button. style.display='inline'; rewrites old value 'none' and object became visible. Instead of "inline" you can write "block" the result will be the same but InkScape uses "inline".

And about "onmouseover" field. The code in it executes when you place cursor over an object. I'm using it for additional interactivity. When you point to hte button, cursor transforms to pointer — a hand.

Later, when I need to made transparent many objects, my code became too complex: this.style.display='none';document.getElementById("plane-t").style.opacity = "0.5";document.getElementById("plane-b").style.opacity = "0.5";document.getElementById("plane-f").style.opacity = "0.5";document.getElementById("plane-s").style.opacity = "0.5";document.getElementById("wing-s").style.opacity = "0.5";document.getElementById("keel-s").style.opacity = "0.5";
That's not good and I'm now investigating other ways of styling the bunch of objects.

That's all folks! All other button actions use different variations of Step 3.
Questions?

Yay!
I'm so happy to have this now, because I've felt so helpless when folks have asked how to do it, and I just didn't know where to turn. Oh yes, questions for sure! Once I know enough about it, I hope to write a comprehensive tutorial. But I have a lot to learn yet

So you used some CSS and some JS? I had no idea that 2 different codes could be used in one page or document. Hhhmm....I guess some codes would be incompatible with each other? Or could you combine any kind of code, to get the result that you need?

I'm not clear where you put the CSS opacity info?

The code that you placed in the Object Properties dialog (onclick and onmouseover) (and the others that you didn't use) do you know of a resource that lists all the codes that could possibly be used there (in/with Inkscape)? Or, if someone wanted to make something like this, like an interactive webpage, would you recommend learning javascript from the beginning? And same question about CSS -- is there kind of a list of commonly used codes somewhere, or better to learn CSS from the beginning?

I have learned the basic HTML code, although I haven't used it, and have forgotten a lot. It should come back quickly though. I planned to move on to CSS, but I haven't quite gotten around to it. I was a little more motivated in the past to have a website, than I am now. But once I have all the proper skills, I'll probably get back into it.

Anyway, thanks Eldarado
Awesome info!

brynn wrote:Or could you combine any kind of code, to get the result that you need?

Yes.

brynn wrote:I'm not clear where you put the CSS opacity info?

CSS properties can be set by CSS code or by JavaScript code.

CSS code looks like this:

or like this:


In JavaScript setting CSS properties looks like this:


The common model of interactive SVG is: Event → JavaScript → CSS.
We get Event: clicking, hovering etc. Catch it with JS event helpers: onclick, onmouseover etc. And use JS to modify CSS properties.

brynn wrote:do you know of a resource that lists all the codes that could possibly be used there (in/with Inkscape)?

Any JS tutorial site.
Like http://www.w3schools.com/js/ or https://developer.mozilla.org/en/JavaScript

brynn wrote:Or, if someone wanted to make something like this, like an interactive webpage, would you recommend learning javascript from the beginning? And same question about CSS -- is there kind of a list of commonly used codes somewhere, or better to learn CSS from the beginning?

One don't have to be a Javascript guru or pro. Learning basics is enough. Same for CSS.

Thanks
I'm so excited, I'll be trying this soon! Just have to think up a good project.

Hey!!
Thanks a lot for the tutorial! I hope I will soon have time to try it on some stuff.

Awesome!!!

Eldarado,
Is it ok if I translate your tutorial to my language? Galician http://en.wikipedia.org/wiki/Galician_language
Of course, I will credit you.
Cheers!

Ok.