First go into the symbol
ADD A "CLICK" EVENT
with the code....
First part in "" is the URL, followed by if you want new window etc (what the HTML is but in quotes)
sorry difficult to see in screen shot.
Essentially you want to add three events.
MOUSEOVER - for example sym.$("email").css("background-color","rgba(231,76,60,0.0)");
email is the symbol name (case sensitive), I use a transparent email, and change the background when mouse is over, the RGBA can also be HEX #FFFFFF etc.
MOUSEOUT - put it back to the background color of where your symbol is. if you have it on top of a white background then you would do..
sym.$("email").css("background-color","#FFFFFF"); This step is important as you got to clear it back to what the original background is.
CLICK - that is where you code the URL window.open("http://www.github.com","_blank");
It doesn't matter what CSS you use, you can also have two images (in two different colors) for the mouseover and mouseout (this way the symbol changes rather than the background box.
Also you can use your symbol as a icon font (you can get them from Foundation Icon Fonts | Playground from ZURB)
Then you would just have
sym.$("email").css("color","#HEX number for rollover");
sym.$("email").css("color","#HEX number to return to normal");
The icon font is best as it is responsive to screen sizes.
Will this work on an image though? It's not typed out within edge animate it is a png file brought over from photoshop?
Also what is the "url" you're referencing above?
Yes it will and you got to do it this way in Edge Animate. You got to use an event in the symbol.
Question - you got to decide if you want the color to change when you hover over the link (to indicate it is a link). Then you got to put in the link. So you want to use an image, which I believe is a transparent image.
You go into the symbol and double click to left of symbol in timeline (as in screen shot). Then you hit the + to add an event. Then you add:
1. Add a CLICK action In the white box type window.open("http://www.github.com","_blank");
BUT REPLACE http://github.com with the URL that you want, do not use the one I have. This is a URL. When a user clicks on your symbol it will go to this link. So replace it with your URL. the second part _blank says that you want to have a new window open up when the user goes to the new link (this is good so that you don't have the user leave your site). Note you can also link to other pages on your site. To do this just replace the URL above with the page in your site. For example window.open("/yourotherpage.html","_blank"); To understand the second part _blank your options are:
_blank Opens the linked document in a new window or tab _self Opens the linked document in the same frame as it was clicked (this is default) _parent Opens the linked document in the parent frame _top Opens the linked document in the full body of the window
2. Add a MOUSEOVER action. and the easiest one is...
you got to replace the"email" with "your-symbol-name". in the timeline when you double click on your symbol - for whatever item you click to the left for - that line has a name - use that name. In my screen shot above the name would be "github". Remember to put quotes around it.
3. The last part is to reverse out 2 - that is when a user scrolls away from a clickable image icon.
sym.$("email").css("background-color","white"); I put white because the symbol is put on top of a white background. so when I remove the red, when a user scrolls away from it, you need to set it back to the original (which is the background color of your stage or whereever the symbol is).
sorry a v copied over item 2.
Item 2 should read --->
can you screen shot your screen for the symbol and provide the URL that you want to link to? Then I can provide the code you need to do that. Also let me know what colors you want when a mouse hovers over the symbol. And the color of your stage background.
does the animation have to do with mouse rollover? if so then you have a bit more code to add by using the css property display and hide., which I can provide the code f you screen shot at least the elements belonging. It is difficult to understand this, without all the details of your animation symbol. but to answer your question, yes if you want an animation motion to occur instead on the linked object, you can do that by using a different CSS property. What is the exact animation (in the timeline what has the bars in it)?
use visibility to do stuff like this....
where text1 is your symbol.