7 Replies Latest reply on Feb 11, 2013 5:00 PM by TimJaramillo

    How to hyperlink text in a paragraph

    nrye2012sadlfjhasef

      Hi all (apologies for a newbie question but I couldn't find an answer to this looking through the FAQs)

       

       

      I inserted a text box in my composition (called "linksAtBottom") and it looks like this:

       

       

      faq  |  board |  mission | join our mailing list | contact us

       

       

      All of the above are listed in that one text box called "linksAtBottom"

       

       

      How do I highlight just "faq", "board", "mission" and so on and tag each with their own URL hyperlink?

       

       

       

      Many thanks!

       

      Nathan

        • 1. Re: How to hyperlink text in a paragraph
          resdesign Adobe Community Professional & MVP

          You can use html to hightlight on events.

           

          sym.$('yourtext').html('html tags here');

           

          You could use tranparent boxes on top that would react on mouseover for example and change the html tag for each mouseover or mouseout or click.

           

          I am sure there are multiple ways this could be done.

          • 2. Re: How to hyperlink text in a paragraph
            nrye2012sadlfjhasef Level 1

            Thanks!   I had thought about the transparent boxes (like image maps back in the day) but where do I find the code to edit? 

             

            In my edge file I see:

             

            {

                        id:'linksAtBottom',

                        type:'text',

                        rect:['150px','772px','auto','auto','auto','auto'],

                        text:"faq | board | mission | join our mailing list today | contact us",

                        align:"left",

                        font:['Courier, \'Courier New\', monospace',12,"rgba(255,255,255,1)","normal","none","normal"]

                     },

             

             

            Can I wrap link tags around this?   I'm guessing no but am about to try.   I'm just not sure where to add or find the:  sym.$('yourtext').html('html tags here');   part. 

             

            Thanks!

            • 3. Re: How to hyperlink text in a paragraph
              TimJaramillo Level 4

              Hi there,

               

              You can also dynamically add hrefs directly into a textfield within Edge, and add CSS to your html page to control the hover state for links.

               

              For example, put a textfield called "txt_dynamic" on the Edge Stage. Then, to dynamically add text and links to that textfield, add this to the Stage.compositionReady event:

               

              sym.$("txt_dynamic").html("<a href='http://www.adobe.com'>faq</a>  |  <a href='http://www.google.com'>board</a>");

               

              Then, within the head tag of your html page, add this, to control the hover color of the links:

               

              <style>

              a:hover {

                        color:#ff0000 !important;

              }

              </style>

               

              Example:

              www.timjaramillo.com/code/edge/dynamic_text_links

               

              Source:

              www.timjaramillo.com/code/edge/_source/dynamic_text_links.zip

              • 4. Re: How to hyperlink text in a paragraph
                JordiMorató

                Hi all,

                 

                If I have a large text where only some words have to be tagged with <a href>... Do I need to write all the whole text after sym.$("my large text").html(" ?.

                And Tim.... I won't control and see the adobe Edge text properties, will I? I suppose I have to control "my large text" Edge DIV with external .css file assigning before a class name to "my large text" Edge DIV, haven't I?

                 

                Thanks...

                • 5. Re: How to hyperlink text in a paragraph
                  TimJaramillo Level 4

                  Hi Jordi,

                   

                  Adding your whole text to the dynamic textfield via code, in the code window would be the easiest way to get all your text in that textfield I believe. Another option would be to load in the text via xml.

                   

                  You can control the normal Edge text props for your dynamic text field, using the text properties panel in Edge. You can't style your hyperlinked text with that built in panel though. For this, I've been using an external stylesheet to style hyperlinked text. I did see a post by forum member oolorin, who suggested that you could put styles inline as shown below (external style sheet is much cleaner though):

                   

                  http://forums.adobe.com/message/4375947

                   

                  sym.$("text_1").html("<style type='text/css'>a:hover{text-decoration:underline;};</style>This is some <a href='randomtext.com' target='_blank' alt='check out my random text'><span style='cursor: pointer;'>random text</span></a>.");

                   


                  • 6. Re: How to hyperlink text in a paragraph
                    JordiMorató Level 1

                    Hi Tim,

                     

                    Thank you for the quick response. I've just read the link you post and It has been very useful. I'll try what I wanna do and if I can't solve it, I'll annoy you again

                     

                    Thanks.

                    • 7. Re: How to hyperlink text in a paragraph
                      TimJaramillo Level 4

                      Cool, good luck!