Javascript for Illustrator svg

Forum|Forum|8 years ago
February 2, 2018
2 replies
7171 views

Hello,

I want to create an interactive svg map for a website with hyperlinks on different areas. I can do that, but I would also like the colour/fill of each area to change on mouseover. I believe that needs some javascript adding but that's where my skills end. Can anyone tell me what javascript I need to use to create that colour change effect?

Thanks

This topic has been closed for replies.

Correct answer Disposition_Dev

While you're correct that you'd need javascript to do this, this isn't really an Illustrator Scripting question. This is a web development question. You'd need to generate your SVG in illustrator (or similar vector editing program) but the mouseover effects you're talking about require linked or embedded javascript within the code for the website.

This particular forum is for coding/automating the inner workings of illustrator with javascript (or applescript or VBS). For example, renaming different layers, paths or groups inside an illustrator document.

That said, if you said you could write the code to create hyperlinks for each section of the map, you can write the code to change colors with mouseover. You simply need to target the element, add an eventListener for mouseover, then set the resulting function to update the CSS property for the targeted element. You'll also want to add a "mouseout" or "mouseleave" event listener to set the color back to the default whenever the mouse moves away from the target element.

Good luck. =)

Disposition_DevCorrect answer

Legend

While you're correct that you'd need javascript to do this, this isn't really an Illustrator Scripting question. This is a web development question. You'd need to generate your SVG in illustrator (or similar vector editing program) but the mouseover effects you're talking about require linked or embedded javascript within the code for the website.

This particular forum is for coding/automating the inner workings of illustrator with javascript (or applescript or VBS). For example, renaming different layers, paths or groups inside an illustrator document.

That said, if you said you could write the code to create hyperlinks for each section of the map, you can write the code to change colors with mouseover. You simply need to target the element, add an eventListener for mouseover, then set the resulting function to update the CSS property for the targeted element. You'll also want to add a "mouseout" or "mouseleave" event listener to set the color back to the default whenever the mouse moves away from the target element.

Good luck. =)

L

LongbowdesignAuthor

Participant

Thanks very much. It's a bit ambitious for my skill level, but at least I now know the score.

Silly-V

Legend

You can read my super long article on using the SVG Interactivity palette, and about 60% of the article is about variable data, etc, so don't pay attention to those parts, but you can use that palette to put some scripts in, and they will show up in your SVG when saved out with the "Save-As" format.

Illustrator Variable Data Extended Techniques: Interactive SVG/HTML Export | LinkedIn

Also

MAP SVG HOVER TOOLTIP LINK

But probably the best one for you to read instead of all the other ones is:
Re: Re: Re: Re: I am using illustrator CS5. How can I create a svg file with rollover to show one more layer?