9 Replies Latest reply on May 6, 2015 2:09 PM by dbeach71

    Create a link inside a symbol?

    benf66502

      So I have a symbol with two animations inside of it. An in and an out, obviously the in animates in and the out goes out, the symbol is controlled by another symbol that when clicked animates out whatever is on the page currently and brings in the information. Within this specific symbol is contact information, I'd obviously like to make the email a clickable link but I can't seem to figure it out. I've drawn a box around it and made it completely transparent following the animation along hoping that would work, I've attempted to make the entire image (it's a png of text with a slight design on it brought over from photoshop) a clickable link, I've searched around and followed some tutorials online and nothing is seeming to work. Any help is greatly appreciated, thanks!

        • 1. Re: Create a link inside a symbol?
          dbeach71 Level 1

          First go into the symbol

           

          Slide1.jpg

          THEN

           

          ADD A "CLICK" EVENT

           

          with the code....

           

          window.open("http://www.github.com","_blank");

           

          First part in "" is the URL, followed by if you want new window etc (what the HTML is but in quotes)

          • 2. Re: Create a link inside a symbol?
            dbeach71 Level 1

            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.

            MOUSEOVER

            sym.$("email").css("background-image","url("/images/imagefilemouseover.png");

            MOUSEOUT

            sym.$("email").css("background-image","url("/images/imagefilemouseout.png");

             

            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

            MOUSEOVER

            sym.$("email").css("color","#HEX number for rollover");

            MOUSEOUT

            sym.$("email").css("color","#HEX number to return to normal");


            The icon font is best as it is responsive to screen sizes.

            • 3. Re: Create a link inside a symbol?
              benf66502 Level 1

              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?

              • 4. Re: Create a link inside a symbol?
                dbeach71 Level 1

                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.

                 

                Remember with Edge animate, you can't have anything happen unless you have an action or an event.  This is coded in javascript.  Javascript is easy if you think of it this way --> function(first parameter, second parameter).  so if the function is to open a URL that is window.open and there are two parameters which are the URL and the method to open the URL. 

                 

                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:

                 

                _blankOpens the linked document in a new window or tab
                _selfOpens the linked document in the same frame as it was clicked (this is default)
                _parentOpens the linked document in the parent frame
                _topOpens the linked document in the full body of the window



                2.  Add a MOUSEOVER action.  and the easiest one is...


                v


                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.


                So what this says is for symbol "your-symbol-name" which is defined as the png file that you put on the screen from your library - the javascript already knows that when you refer to this symbol, that is means the image png file.  The second part is .CSS which is the style.  I simplified it by using the standard basic color instead of RGB or HEX.  So the .css("background-color", "red"; says for the symbol (the PNG file) when a user scrolls over it, then make a box around it that is red with the symbol on top of 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).


                There are many variations like I mentioned in second response, but this is the easiest.  No matter what though, you cannot get away doing this any other way.  You got to use Javascript to code action/event behaviors.





                • 5. Re: Create a link inside a symbol?
                  dbeach71 Level 1

                  sorry a v copied over item 2.

                   

                  Item 2 should read --->

                   

                  sym.$("email").css("background-color","red");

                  • 6. Re: Create a link inside a symbol?
                    dbeach71 Level 1

                    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.

                    • 7. Re: Create a link inside a symbol?
                      dbeach71 Level 1

                      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)?

                      • 8. Re: Create a link inside a symbol?
                        dbeach71 Level 1

                        use visibility to do stuff like this....

                         

                        sym.$("text1").css("visibility","hidden");

                         

                        where text1 is your symbol.

                        • 9. Re: Create a link inside a symbol?
                          dbeach71 Level 1

                          This will help - you can add whatever CSS property style or animation etc.  Use the actions and events.  And the appropriate CSS found at...

                           

                          http://www.w3schools.com/cssref/default.asp