Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

General Design: showing links, a better way.

Bottom of Page

1 to 5 of 5

  1.  
    • CommentAuthormihai
    • CommentTimeJan 13th 2007
     permalink
    Some time ago i found an article online thet explained how you can attach to the back of an external link an image showing the type of link it was, a pdf, a word document, an image ... etc. something like it's shown here: http://en.wikipedia.org/wiki/Tulip_mania#Competing_views
    link on the page: "The Tulipmania: Fact or Artifact?"

    Anyone has any ideas about this, maby stumbled upon that website... or something like this.

    Thanks
    • CommentAuthoraxe_sosharp
    • CommentTimeJan 13th 2007 edited
     permalink
    Another example where you can use a CSS pop up.

    Will degrade nicely in screen readers too.

    Code example:

    put the image inside the anchor

    <a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">This is a Link<img src="foo.jpg" width="x" height="y" alt="file type"/></a>

    CSS as follows

    a{position:relative;} /* important this makes the <a> the parent of the img for position*/
    a img{
    position:absolute;
    right:-50px;/* change this till the image is where you want*/
    top:0;
    display:none;
    }

    a:hover img{display:block;}

    To those that have seen me suggest this before 'I do not have a CSS pop up fixation'. It's just fits the purpose!
  3.  permalink
    Joking apart looks like some serious CSS3 going on here

    This is the relevant section from the Wiki stylesheet

    /*
    ** keep the whitespace in front of the ^=, hides rule from konqueror
    ** this is css3, the validator doesn't like it when validating as css2
    */
    #bodyContent a.external,
    #bodyContent a[href ^="gopher://"] {
    background: url(external.png) center right no-repeat;
    padding-right: 13px;
    }
    #bodyContent a[href ^="https://"],
    .link-https {
    background: url(lock_icon.gif) center right no-repeat;
    padding-right: 16px;
    }
    #bodyContent a[href ^="mailto:"],
    .link-mailto {
    background: url(mail_icon.gif) center right no-repeat;
    padding-right: 18px;
    }
    #bodyContent a[href ^="news://"] {
    background: url(news_icon.png) center right no-repeat;
    padding-right: 18px;
    }
    #bodyContent a[href ^="ftp://"],
    .link-ftp {
    background: url(file_icon.gif) center right no-repeat;
    padding-right: 18px;
    }
    #bodyContent a[href ^="irc://"],
    .link-irc {
    background: url(discussionitem_icon.gif) center right no-repeat;
    padding-right: 18px;
    }
    #bodyContent a.external[href $=".ogg"], #bodyContent a.external[href $=".OGG"],
    #bodyContent a.external[href $=".mid"], #bodyContent a.external[href $=".MID"],
    #bodyContent a.external[href $=".midi"], #bodyContent a.external[href $=".MIDI"],
    #bodyContent a.external[href $=".mp3"], #bodyContent a.external[href $=".MP3"],
    #bodyContent a.external[href $=".wav"], #bodyContent a.external[href $=".WAV"],
    #bodyContent a.external[href $=".wma"], #bodyContent a.external[href $=".WMA"],
    .link-audio {
    background: url("audio.png") center right no-repeat;
    padding-right: 13px;
    }
    #bodyContent a.external[href $=".ogm"], #bodyContent a.external[href $=".OGM"],
    #bodyContent a.external[href $=".avi"], #bodyContent a.external[href $=".AVI"],
    #bodyContent a.external[href $=".mpeg"], #bodyContent a.external[href $=".MPEG"],
    #bodyContent a.external[href $=".mpg"], #bodyContent a.external[href $=".MPG"],
    .link-video {
    background: url("video.png") center right no-repeat;
    padding-right: 13px;
    }
    #bodyContent a.external[href $=".pdf"], #bodyContent a.external[href $=".PDF"],
    #bodyContent a.external[href *=".pdf#"], #bodyContent a.external[href *=".PDF#"],
    #bodyContent a.external[href *=".pdf?"], #bodyContent a.external[href *=".PDF?"],
    .link-document {
    background: url("document.png") center right no-repeat;
    padding-right: 12px;
    }



    Anyone out there like to explain it further?
    • CommentAuthorYakuzza
    • CommentTimeJan 13th 2007
     permalink
    Another short method:


    a.external {
    background-image: url(external.gif);
    padding-right: 16px;
    padding-left: 1px;
    background-repeat: no-repeat;
    background-position: right;
    text-decoration:underline;
    }

    an example for HTML

    <a href="#" class="external">My external link</a>
  5.  permalink
    yeah i have that site booked marked...well actually two...here you go:

    http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
    http://www.pooliestudios.com/projects/iconize/

    Its done using a small amount of CSS. best way to do it!

    GL
    Vix

1 to 5 of 5

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page