Subscribe to RSS FeedAdding An Image Or Icon To Links
Ever been browsing around on a site and notice that their outbound links or certain links have that small image to the right of the links? I’ve always thought this was a neat little way to inform your readers of outbound links or say if the link was to a PDF. By adding an image to the link you can prepare your visitors ahead of time so that they can be prepared to wait 100 years for a PDF file to load up.
First things first we need our image.
Oooooo, super exciting yes? Ok, so now that we have our image all that we have to do now is give our link a special class and then setup the code in our stylesheet.
For sake of simplicity lets just give our image a class of imagelink.
<a href=”/” class=”imagelink”>Link</a>
Now, lets go inside of our stylesheet and add the appropriate code.
.imagelink {
padding-right: 20px;
background: url(’imagelink.jpg’) right no-repeat;
}
The padding-right: 20px; will create a space 20 pixels wide to the right of the end of the link. The background part broken down; url(’imagelink.jpg’) is the URL to whatever image you want to use, right aligns the image all the way to the right and no-repeat keeps the image from repeating more then once.
So with it all said and done you should have a link that looks like this
Related Posts
November 14th, 2008 at 12:14 am
This is a really great idea. I have never seen any blog ever do this. Usually the link will say if what you are clicking on is a pdf file. But this is a great idea none the less
Ryan McLeans last blog post..Could Advertising Be Harming Your Website?
November 14th, 2008 at 7:58 am
Jarret,
This is a great tip. I never thought of creating an link class that inserts the image for me. I always sit there and add the image to every link in my html which now seems like a pretty bonehead move.
Thanks. :)
Adam
Adams last blog post..Danny Cooper’s - Blog Comment Blueprint
November 14th, 2008 at 11:17 am
[...] love - Jarret Cade recently made a great post about how to easily add images to links to make them a little more user [...]
November 14th, 2008 at 5:56 pm
Very cool! This might even be something I can do. LOL
Dennis Edells last blog post..We Will Stay Do-Follow, But…
November 19th, 2008 at 11:39 am
Wow, that’s one sexy link man! I like it…and you laid it out so simple for us non coders! Thanks dude.
Normal Joes last blog post..Transform Your Thinking-If You Had THIS You’d Be Successful
November 24th, 2008 at 7:30 am
Looks really interesting, and since I have very hard times with HTML codes, this is something I could actually make to work.
Cheers,
The Moneyac
TheMoneyacs last blog post..Looking good…