Add Images to Links With CSS by Extension
This little trick will save you a pile of typing and coding for your webpage or blog!
12 Responses to “Add Images to Links With CSS by Extension”
-
The Daniel Richard Blog » “Daily Reads of Life, Technology, & Business News” Says:
November 30th, 1999 at 12:00 am^ - means at the beginning of the text * - means anywhere from the text There are more expressions which we wouldn’t be using with CSS anytime soon. [IMG :)] Enjoy adding images to links! Source: http://www.dailycupoftech.com/2007/06/26/add-images-to-links-with-css-by-extension/ http://www.youtube.com/watch?v=IDT2RMJNvSA Sphere: Related Content
-
sprignaturemoves.com Says:
November 30th, 1999 at 12:00 amThis
-
LanceW Says:
June 26th, 2007 at 7:45 amExcellent,
why didn’t I think of that!
Lance -
Jared Harley Says:
June 26th, 2007 at 9:29 amAwesome! Thanks, Tim!
-
Ryan Neufeld Says:
June 26th, 2007 at 10:43 amTim,
First time poster and a new reader of your blog. I recently found your post “Security Video - Bluesnarfing” and have since added your RSS feed to the other 20+ I read on a daily basis.
That out of the way. This is a great video and the narrator does a very good job explaining what is being done and how it all works.
-
kanwal Says:
June 26th, 2007 at 10:59 amAnyway to do links for specific domains…
such as links that contain http://www.example.com in the url then possibly add that sites faviconis this possible?
-
Jared Says:
June 26th, 2007 at 9:57 pm@kanwal:
Yes, it’s possible, but you’re going to need javascript to go to the website and parse the file for the favicon link.
———————————-
Also, this trick, as awesome as it is, doesn’t work in IE. 2 tricks I figured out:
You can list multiple types, seperating each with a comma, and you can move the icon to the right (where I think it makes more sense):
/* Quicktime File Type */
a[href $='.mov'],a[href $='.qt']
{
padding-right: 20px;
background: transparent url("filetype-icons/quicktime.gif") no-repeat center right;
}
-
Jared Says:
June 26th, 2007 at 10:04 pmSorry - and once again, I found something else cool (I really think this tip was cool, Tim, thanks for wasting my day!)
You can use any attribute - so if you want an arrow image (think Wikipedia), etc, for visual indication of an external link, you can use the target attribute:
/* External Link */
a[target = '_blank']
{
padding-right: 20px;
background: transparent url("filetype-icons/_blank.gif") no-repeat center right;
}
-
Chris Says:
June 27th, 2007 at 7:20 amYea, its totally possible. Just replace the pdf with the website.
-
BillyG Says:
July 2nd, 2007 at 7:07 amAwesome! Time to get rid of my span tags…
-
» E-Mail Add Images to Links With CSS by Extension | Daily Cup of Tech Says:
September 22nd, 2007 at 12:31 am[…] Do More: You can leave a comment, or trackback from your own site.E-Mail This Post […]
-
randomguy Says:
December 22nd, 2009 at 7:59 pmGreat tutorial! I just have one question. How can I add more extensions? Or have the same icon for all?
Thanks!!!
