CODEWITHSUNDEEP
javascriptsvgonclickonmouseover
Adam Bell
Adam Bell

Reputation: 1045

Interactive SVG: Change Fill Color onMouseOver

I'm currently working on an imagemap in Addobe Illustrator CC and I want to be able to change the color of the shapes onMouseOver. Tried this in my SVG Interactivity panel:

style.fill="yellow"

and it doesn't seem to work. What would be the proper function to place there for onMouseOver?

My onClick event to link out to websites does work. That was:

location.href='https://thecleverroot.com/tag/southwest/';

Upvotes: 0

Views: 2668

Answers (2)

Adam Bell
Adam Bell

Reputation: 1045

OK, I found a solution. Originally, Illustrator assigned fill styles to each shape in my group and not the group itself. Once I changed the fill references in my CSS to the ones in my group and not each individual path, I solved the problem and the hovers now work great without JS.

Upvotes: 0

Iaroslav Karandashev
Iaroslav Karandashev

Reputation: 574

If you need to change only styling, then you can use CSS for SVG. Add class name to desired element and place the following code to your CSS file:

.className {
  color: yellow;
}

.className:hover {
  color: blue;
}

if you want to redirect users to another URL onClick, there is no need to use JavaScript. You can add anchor element to your SVG and place href there. Here is a nice article on this approach.

If you wish to style element while click use:

.className:active {
  color: red;
}

Use JavaScript only if your SVG should have some complex logic.

Upvotes: 1

Related Questions