How do I make image hyperlinks have a background image?

Question

I want all .jpg links to have a certain background image. so a link on a page like 'http://mysite/myimage.jpg' would automatically be prefixed with a small icon. Actually all links to images, ie .gif .png as well with the same icon. If the link is to a website, ie .htm/.php/.html/.asp it should have a different image. I want it to be through classes in CSS. Any help appreciated. TIA

Answer 1

You can accomplish this with CSS selectors + background URL properties. For example, to include an icon with all IMG tags within an Anchor tag:

A IMG { background: url("/icon.png") no-repeat scroll; }

Answer 2

I think this should work, it's using the CSS3 attribute selectors though, so browser implementation varies wildly:

a[href$='png'],
a[href$='gif'] {/* styles */}

It's basically selecting all links whose href attribute ends with (the $= part) the file-type extension 'png' or 'gif' (obviously other file-types are similarly possible).

Reference, and further details at: http://www.css3.info/preview/attribute-selectors/

---

Edited:

So, if I wanted to make a special BG image for just youtube links, would I use a[href$='youtube'] {/* styles */}

No, if you wanted it for just YouTube links you could use:

a[href*=youtube] { /* css */ }

The *= is the equivalent of 'contains', though you could use:

a[href^=http://www.youtube.com] { /* css */ }