Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Custom link color based on URL?

    Is it possible to write a function that will look at the URL of a link and change the color of a hyperlink link on a website if the link directs the user to a page outside of the site? I am looking for a simple way to distinguish links on an IT website so that users will know which links will take them to a page on another website.

    Another possiblity is a code that will determine if the URL contains "http://www.example.com/xxx" or "http://www.example.xxx.com/xx" and change the color of the hyperlink accordingly.

    Is this possible? How do I do this? I found this thread (http://www.codingforums.com/showthread.php?t=207071) but I'm not sure if it will help with link colors.

    Thank you SO much!!!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,316
    Thanks
    23
    Thanked 613 Times in 612 Posts
    Easier to do in CSS and classes. I take it that your doing this to your site and have access to the code.

  • Users who have thanked sunfighter for this post:

    bae289 (04-04-2012)

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    As an alternative to classes you can use rel attributes in the anchor tags and then apply extra CSS to anchor tags using the rel="external" attribute. It is supposedly good for SEO and it's fully semantic, so it's win-win.

    The process for that is described here:
    http://meganmcdermott.com/2006/10/26...inks-with-css/

    Code:
    a[rel="external"] {background:url(../images/external.png) 99% 40% no-repeat; padding-right: 15px;}
    You can see another couple of neat tricks here:
    http://www.csstemplatesweb.com/css-a...inks-with-css/

    There are a few ways to get this done so you can take your pick.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    bae289 (04-04-2012)

  • #4
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you very much for your help! I really appreciate it.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •