SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb How is external link icon showing up on everything kind of link?

    I created a simple test site and everything works fine but when I apply the same code to the actual site I get an external link icons on everything and my url titles are showing up on internal links.

    What am I doing wrong?

    I not want external link icon on internal or anchor links.

    I have attached mycode.txt
    Attached Files Attached Files

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Oooh dear, there's quite a few things you'll need to look at here.

    To get rules to apply to only external links, you need:
    a[href^="http:"] { rules go here }

    To get rules to apply to only email links, you need:
    a[href^="mailto:"] { rules go here }

    I'm not sure what's going on with
    <a href="http://quicklinks">Quicklinks</a></li>
    unless that's a link to some kind of intranet service. It's certainly no good for a regular website, whether it's supposed to be a link to another site, or an internal link within your own site.

    Your use of headings is, um, a bit erratic. The top-level heading should be <h1>, then <h2> for the first level of subheadings, <h3> for the next level down, and so on. You start off with <h6> on something that looks like it isn't a heading at all, then <h5> for the main heading, then <h1>s for the sub-headings.

    A better plan than <h1><a name="toc_4"></a>Title</h1> would be <h1 id="toc_4">Title</h1>. Even better would be to replace toc_4 with a word related to the section title.

    Then you appear to have a script after the end of the </html> section, which isn't allowed (unless you meant that to be a separate file, which would be fine, it just wasn't clear from the .txt you've uploaded if that's the case).

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Steve

    The Javascript is a separate file, I just included it in the .txt incase you needed to look at it. The Javascript puts the url title You are leaving only on the non quicklinks/quicklinks-qa links.

    <a href="http://quicklinks">Quicklinks</a></li> is an internal website. There are a billion links in the site with either http://quicklinks/ or http://quicklinks-qa/
    eg) http://quicklinks-qa/bulletins/data/.../****/***/.htm
    http://quicklinks/bulletins/data/bul.../****/***/.htm


    So in my code for the mailto
    a[href^="mailto:"]
    {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(C:/QuicklinksSynchronized/images/link_icons/email_link.gif) no-repeat 100% 0;
    padding: 0 20px 0 0;
    }

    What is the difference between ^ and *?

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by phipm1 View Post
    What is the difference between ^ and *?
    ^ means it only looks for that string at the start of the URL
    * means it looks for the string anywhere in the URL.

    When the string is http: or mailto:, you know it's going to be at the start, so using ^ means the computer has to do less work, meaning a faster page load and render.

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so when I use ^ the external link icons are now puts on the quicklinks/quicklinks-qa link and the external link title are also put on the internal link which I do not want either.

    I've created a simple test page which I've attached.
    Attached Files Attached Files

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can't follow your logic in that code but you have errors anyway. There should be no space before the colon in the pseudo class and after the "attr" in the content property.

    e.g. attr (title)

    should be:

    attr(title)

    and

    a[href*="google"] :hover

    should be:

    a[href*="google"]:hover

    I think this examples contains all the things you need.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    a {
        display:inline-block;
        padding-right:14px;
        padding: 0 20px 0 0;
    }
    a[href^="http:"] {
     background:yellow url("extlink.gif") no-repeat 100% 0;
     padding: 0 20px 0 0
    }
    a[href^="http:"]:hover:after {
        content:" - External - " attr(title);
        background:red;
    }
    
    /* remove external link from google and title
    a[href*="google"]{ background:green;}
    a[href*="google"]:hover:after { content: " "; }
     */
    
    a[href^="mailto:"] {
     line-height:18px;
     background:#ccc url(C:/QuicklinksSynchronized/images/link_icons/email_link.gif) no-repeat 100% 0;
     padding: 0 20px 0 0;
    }
    
    /*removes external link icon from attributes http://quicklinks/*/
    a[href*="quicklinks"] {background:none;}
    a[href*="quicklinks"]:hover:after {content: " ";}
    
    
    </style>
    </head>
    <body>
    <ul>
        <li><a title="Yahoo" href="http://www.yahoo.com">Yahoo.com</a> </li>
        <li><a title="Google" href="http://www.google.com">Google.com</a> </li>
        <li><a title="quicklinks"href="http://quicklinks">Quicklinks</a></li>
        <li><a href="http://quicklinks-qa">Quicklinks-QA</a></li>
        <li><a href="http://test.com">test</a></li>
        <li><a href="#test">Internal Link</a></li>
        <li>send an email to <a href="mailto:retailstoresupport@yahoo.com">guesswho@yahoo.com </a></li>
    </ul>
    </body>
    </html>

  7. #7
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your example. I got it to work However....

    I have over 10,000 pages that have need to be updated with external link icons, and url title. Most of the links do not have url titles. That is why I wrote javascript to automatically add the title of you are leaving .

    We are using IE 7. so not sure if the background colours are suppose to change to red and green, but I do see the yellow.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by phipm1 View Post
    Thanks for your example. I got it to work However....

    I have over 10,000 pages that have need to be updated with external link icons, and url title. Most of the links do not have url titles. That is why I wrote javascript to automatically add the title of you are leaving .
    I added the titles of the links for testing as I did not want to write a js program to add them to the links. If you want it tested with your js then you would have needed to supply us a working demo.

    We are using IE 7. so not sure if the background colours are suppose to change to red and green, but I do see the yellow.
    IE7 doesn't support :after so I assumed you were going for IE8+ only. You'd have to script it for IE7 if you wanted the same functions.

  9. #9
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by phipm1 View Post
    so when I use ^ the external link icons are now puts on the quicklinks/quicklinks-qa link
    Well, yes. The 'quicklinks' links are external, because they're pointing to a different server. I suppose you could get round that by targeting http://www instead of just http, and then just make sure that all external links include the www in them.

    and the external link title are also put on the internal link which I do not want either.
    Why do you need a title on the link anyway? In almost all cases, the link text should be sufficient without needing a tooltip that a lot of people won't see or read.

  10. #10
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason for the link title is to inform people that they are leaving the internal site.

    They like to hand hold people around here lol

    I don't agree but my vote don't count lol

  11. #11
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you read this line of code?

    a[href^="http:"]:hover:after {
    content:" - External - " attr(title);
    }

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by phipm1 View Post
    How do you read this line of code?

    a[href^="http:"]:hover:after {
    content:" - External - " attr(title);
    }

    Any hovered links that start with http will have the word "- External -" added after the content in that element and then will also be followed by the text in the title attribute of that element.

  13. #13
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    So everything seems to be working except the external links icon.

    I have the exact path to the icon, but its does not show up.

    What am I doing wrong?

    CSS code for external links is at the bottom of the css.txt file
    Attached Files Attached Files

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I just copied your files added in my own local image and they showed up straight away in Firefox.

    The problem in IE is that you have missed the "a" selector before the attribute selector.

    Code:
    a {
    	display:inline-block;
    	padding-right:14px;
        padding: 0 20px 0 0
    }
    [href^="http://www"] {
     background:#ccc url("images/26x16.gif") no-repeat 100% 0;
     padding: 0 20px 0 0
    }
    It should be:
    Code:
    a {
    	display:inline-block;
    	padding-right:14px;
        padding: 0 20px 0 0
    }
    a[href^="http://www"] {
     background:#ccc url("images/26x16.gif") no-repeat 100% 0;
     padding: 0 20px 0 0
    }

  15. #15
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using IE 7
    I added the a, both mail and external link icons are still not showing up.

    My code is exactly how your example is.

    a {
    display:inline-block;
    padding-right:14px;
    padding: 0 20px 0 0
    }
    a[href^="http://www"] {

    background:#ccc url("/images/link_icons/extlink.gif") no-repeat 100% 0;
    padding: 0 20px 0 0
    }

    a[href^="http://www"]:hover:after {
    content:" - External - " attr(title);
    }
    a[href^="mailto:"] {
    line-height:18px;
    background:#ccc url("/images/link_icons/email.gif") no-repeat 100% 0;
    padding: 0 20px 0 0;
    }

    The location of the external link graphics is /images/link_icons
    this folder is both on quicklinks and quicklinks-qa

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Is the background colour showing up for you? If so then it must be a path issue - try an absolute path to the image to make sure.

    Do you have a version live that we can debug? If not throw up a quick example somewhere as it will be easier for us to spot live.

    Also test in Firefox as well to see whether its a specific IE7 bug and maybe you have a corrupt image in cache or maybe some other IE specific bug triggered..

  17. #17
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes the colours are showing up, red, and grey.

    I've tried changing the path. with http:// and c:/

    Our pages are posted to quicklinks-qa as development then they are posted to our production site quicklinks. So we can't use the absolute path, but I've tried it anyways and it doesn work either.

    We are not allowed to use Firefox which is another stupid thing here lol


    I've attach css file but it won't let me attach the html as it is already in a previous thread. test..txt
    Attached Files Attached Files

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It must be the incorrect path.

    Here is your exact code that I have copied and all I have changed is to add an absolute reference to one of the images on my server.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <HEAD>
    <link href="file:///C|/MichelleTest/testpsi.css" rel="stylesheet" type="text/css" />
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252" />
    <script type="text/javascript" src="/js/extlinkTitle.js"> </script>
    
    <TITLE>TESTPAGE</TITLE>
    <META NAME="subject" CONTENT="Order Processing" />
    <style>
    @charset "utf-8";
    
    
    /* HTML tag styles                             */
    /***********************************************/
    
    body{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	line-height: 1.3;	
    	padding: 0px 0px 10px 10px;
    	font-size: 75%;
    }
    
    /*div#site-container {width: 920px; margin: 0 auto; text-align: left;}*/ 
    
    div#site-container {width: 800px;
    		margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: 10px;
    	text-align: left;
    	padding: 0;
    	background-color:#FFFFFF} 
    	
    	
    div#site-containerF {
    	width: 670px;
    	text-align: left;
    	padding: 0;
    	background-color:#FFFFFF;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: 10px;
    } 
    
    /*div#site-container {width: 800px;
    	margin: 0 auto;
    	text-align: left;
    	padding: 0;
    	background-color:#FFFFFF} */
    
    /******* hyperlink and anchor tag styles *******/
    
    a:link{
    	color: #005FA9;
    	text-decoration: none;
    }
    a:visited{
    	color: #510077;
    	text-decoration: none;
    }
    .instructions {
    	background-color: #33FF00;
    }
    
    a:hover{
    	text-decoration: underline;
    }
    
    /************** header tag styles **************/
    
    h1{
    	color: #333333;
    	padding: 10px 0px 5px;
    	font-family: Helvetica;
    	font-size: 140%;
    	text-transform: capitalize;
    }
    
    h2{
        color: #669933;
    	padding: 10px 0px 5px;
    	font-family: Helvetica;
    	font-size: 120%;
    	text-transform: capitalize;
    }
    
    h3{
    	font: bold 110% Helvetica;
    	color:  #333333;
    	padding: 2px;
    	background-color: #EAEAEA;
    	text-align: left;
    	/*vertical-align: baseline;*/
    	display: block;
    	text-transform: capitalize;
    }
    h4{
     font: bold 100% Verdana;
     color: #333333;
     margin: 0px;
     padding: 3px 0px;
    	text-transform: capitalize;
    }
    /******Page Title*******/
    h5{
    	color: #333333;
    	padding: 5px 0px 5px;
    	font-family: Helvetica;
    	font-size: 160%;
    	font-weight: bold;
    	text-transform: capitalize;
    }
    h6{
     font: 70% Helvetica;
    	text-transform: uppercase;
     color: #333333;
     margin: 0px;
     padding: 3px 0px;
    }
    /************** Table styles *****************/
    /*Default table style*/
    table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px 1px;
    empty-cells: show;
    border-style: solid;
    border-width: 1px;
    border-color: #DBDBDB;
    background-color: transparent;
    font-size: 1em;
    }
    
    td{
    /*font-size: x-small;*/
    vertical-align: top;
    border-style: solid;
    border-width: 1px;
    border-color: #DBDBDB;
    padding: 3px;
    }
    
    /*Table with No Border*/
    
    table.noborder tr, table.noborder td {
     border: 1px none;
     vertical-align: top;
     padding: 3px;
     }
    table.noborder{
     width: 100%;
     border: 1px none; 
     border-collapse: collapse;
     empty-cells: show;
     }
    
    /*Small Table */
    
    table.table80 tr, table.table80 td {
     vertical-align: top;
     border-style: solid;
     border-width: 1px;
     border-color: #DBDBDB;
     padding: 5px;
     }
    
    table.table80{
     width: 80%;
     border-collapse: separate;
     border-spacing: 1px 1px;
     empty-cells: show;
     border-style: solid;
     border-width: 1px;
     border-color: #DBDBDB;
     background-color: transparent;
    }
    /*Table 80% with no border*/
    table.table80nobord tr, table.table80nobord td {
     border: 1px none;
     vertical-align: top;
     padding: 1px;
     }
    table.table80nobord{
     width: 80%;
     border: 1px none; 
     border-collapse: collapse;
     empty-cells: show;
     }
    /*Small Serv Ord Table */
    
    table.smServOrd tr, table.smServOrd td {
     vertical-align: top;
     border-style: solid;
     border-width: 1px;
     border-color: #DBDBDB;
     padding: 3px;
     }
    
    table.smServOrd{
     width: 50%;
     border-collapse: separate;
     border-spacing: 1px 1px;
     empty-cells: show;
     border-style: solid;
     border-width: 1px;
     border-color: #DBDBDB;
     background-color: transparent;
     font-family: New Courier, Courier, mono;
     font-weight:normal;
     font-size:x-small;
    }
    /**********  PSI revision elements **********/
    
    .revision {color: #FF0000}
    
    /********** Service Order elements **********/
    
    .servOrd{
    	font-family: New Courier, Courier, mono;
    	font-weight:normal;
    	font-size:x-small;
    }
    .servOrdBold{
    	font-family: New Courier, Courier, mono;
    	font-weight:bold;
    	font-size:x-small;
    }
    
    
    
    /********** Service Order elements **********/
    
    .servOrd{
    	font-family: New Courier, Courier, mono;
    	font-weight:normal;
    	font-size:x-small;
    }
    .servOrdBold{
    	font-family: New Courier, Courier, mono;
    	font-weight:bold;
    	font-size:x-small;
    }
    /********** Note elements **********/
    .notes{
    	display: block;
    	background-color: #FFFFDD;
    	margin: 2px;
    	padding: 2px;
    	background-position: left top;
    	text-align: left;
    	vertical-align: text-bottom;
    	border-bottom-width: thin;
    	border-bottom-style: solid;
    	border-bottom-color: #EEEEEE;
    }
    /********** Note with Revision Text **********/
    .notesRevision{
    	display: block;
    	background-color: #FFFFDD;
    	margin: 2px;
    	padding: 2px;
    	background-position: left top;
    	text-align: left;
    	vertical-align: text-bottom;
    	border-bottom-width: thin;
    	border-bottom-style: solid;
    	border-bottom-color: #EEEEEE;
    	color: #FF0000;
    }
    /********** Small Heading 1 **********/
    .smH1{
     	font: bold 125% Helvetica;
     	color: #333333;
     	padding: 5px 0px 5px;
    		
    }
    /********** Notice **********/
    .notice{
     	font: bold 125% Verdana, Arial, Helvetica, sans-serif;
     	color: #FF0000;
     	padding: 5px 0px 5px;
    }
    
    .billHeading{
     color: #333333;
    	font-family: Helvetica;
    	font-size: 90%;
    	font-weight:bold;
    }
    /********** Last Modified Date **********/
    .lastModDate{
         font: 80% Verdana, Arial, Helvetica, sans-serif;; 
         color: #999999;
         padding: 5px 0px 5px;
    }
    
    
    .pic-border {
    	border: 1px solid #EEEEEE;
    }
    .imgMiddle{
    vertical-align:middle;
    }
    
    .lowercase{
    	text-transform: lowercase;
    	}
    	
    	/*.invisible ul {
    	list-style:none;
     }*/
    	
    		.alternate li {
    	list-style:none;
     }
     /********** Links with Automatic Icons **********/
    
    
    /***********************************************/
    
    
    a {
    	display:inline-block;
    	padding-right:14px;
        padding: 0 20px 0 0
    }
    a[href^="http://www"] {
     background:#ccc url("http://www.pmob.co.uk/temp/images/arrow.gif") no-repeat 100% 0;
     padding: 0 20px 0 0
    }
    
    
    a[href^="http://www"]:hover:after {
        content:" - External - " attr(title);
    }
    a[href^="mailto:"] {
     line-height:18px;
     background:#ccc url("http://www.pmob.co.uk/temp/images/arrow.gif") no-repeat 100% 0;
     padding: 0 20px 0 0;
    }
    
    
    
    
    </style>
    
    </HEAD>
    <BODY >
    <h6><A HREF="toc.htm">QL-HOME</A>| <A HREF="index.htm" TARGET="_parent">TOC</A>
    </h6>
    <HR />
    <h5>TEST PAGE</h5>
    <UL>
      <LI><A HREF="#TOC_1">Title1</A></LI>
      <LI><A HREF="#TOC_2">Title2</A> </LI>
    </UL>
    <HR />
    <H1><A NAME="TOC_1" id="TOC_1"></A>Title1</H1>
    <ul>
      <li><a href="http://www.yahoo.com">Yahoo.com</a> </li>
      <li><a href="http://quicklinks">Quicklinks</a></li>
      <li><a href="http://quicklinks-qa">Quicklinks-QA</a></li>
      <li></li>
      <li><a href="http://www.google.com">Google</a> </li>
    </ul>
      <H1><A NAME="TOC_2" id="TOC_2"></A>Title2</H1>
    <ul>
      <li> send an email to <a href="mailto:retailstoresupport@yahoo.com">guesswho@yahoo.com </a><br />
    </li>
    </ul>
    <p>External links should have title saying you are leaving </p>
    <p>Quicklink, anchors, and internal links should <strong>NOT </strong>have an external icon</p>
    <p>Email addresses should have and envelope icon</p>
    <HR />
    
      <!-- #BeginLibraryItem "/Library/last_modified.lbi" --><!-- #BeginLibraryItem "/Library/last_modified.lbi" -->
        <div align="center" class="lastModDate">
          <script type="text/javascript" language="JavaScript">
    <!--
        function getCorrectedYear(year)  {
         year = year - 0;
         if (year < 70) return (2000 + year);
         if (year < 1900) return (1900 + year);
         return year;
     }
            var intro = "last modified: ";
            var lmod = new Date(document.lastModified);
            var monthname;
            var lmonth = lmod.getMonth();
            if (lmonth == 0) monthname = "Jan";
            if (lmonth == 1) monthname = "Feb";
            if (lmonth == 2) monthname = "Mar";
            if (lmonth == 3) monthname = "Apr";
            if (lmonth == 4) monthname = "May";
            if (lmonth == 5) monthname = "Jun";
            if (lmonth == 6) monthname = "Jul";
            if (lmonth == 7) monthname = "Aug";
            if (lmonth == 8) monthname = "Sep";
            if (lmonth == 9) monthname = "Oct";
            if (lmonth == 10) monthname = "Nov";
            if (lmonth == 11) monthname = "Dec";
            var yearstr = getCorrectedYear(lmod.getYear());
            var outstr = intro + monthname + " " + lmod.getDate() + ", " + yearstr;
            document.write(outstr); 
            // -->
            
    </script>
        </div><!-- #EndLibraryItem --><!-- #EndLibraryItem -->  
      
    
    </BODY>
    </HTML>
    Just run that page in your browser while online and you will see that the code is working. You must have the wrong path to the image or the image isn't where you think it is.

  19. #19
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    So I copied your complete code and saved it as a new file and it works fine, however when I copy your code for the extlinks into my document it doesnt work.

    I have compared my code to your code in examdiffpro and it matches exactly, but yet my code document doesn't work with links to my graphics.

    So I created a new simplier test page. it works fine with the same code and my links.

    So when your code and my code are exactly the same, why does mine not work?
    Attached Files Attached Files

  20. #20
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is also added You are leaving to the mail link

  21. #21
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    code that adds the url title

    // JavaScript Document
    //external link title
    function extlinkTitle() {
    var mat=[];
    var anc=document.getElementsByTagName('a');
    for(c=0;c<anc.length;c++){
    mat[c]=anc[c].href.match(/quicklinks*/g);
    if(mat[c]==null){
    anc[c].title='you are leaving';
    }
    }
    }
    window.addEventListener?
    window.addEventListener('load',extlinkTitle,false):
    window.attachEvent('onload',extlinkTitle);

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    These images don't seem to exist or can't be accessed.

    http://quicklinks/images/link_icons/extlink.gif
    http://quicklinks/images/link_icons/mail.gif

    I guess there is some server issue there.

    The code in post #19 works for me if I use my images. The only thing that won't work for IE7 is where you are using :after as that is not supported in IE7. You would need to add that support with javascript.

  23. #23
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you add the support with javascript?

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by phipm1 View Post
    How do you add the support with javascript?
    That's not really a css issue but something like this added to your code should work.

    Code:
    *+html a[href^="http://www"] {
     zoom:expression(  runtimeStyle.zoom=1,  insertAdjacentHTML('beforeEnd', '<span class="after"> - External - ' + this.title + '</span>')  );
    }
    .after{display:none}
    a:hover{visibility:visible}
    a:hover .after {display:inline-block}

  25. #25
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your help


Bookmarks

Posting Permissions

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