<a href="">Anchor</a> into image

This is a strange request, but hear goes:

I have a file which has this in it:


<a href="http://www.google.com" class="google-link">Go to Google</a>
// * it's not Google, but it gives an idea of what I am doing

I then include that file in about five different sites (save re-writing it). There’s more going on but this helps to explain it easier.

Each of the sites can then have this in its own CSS file:
.google-link {
color: red;
/* etc. */
}

Can I style it with an image and get rid of the text using only CSS? That way some sites can have the text link and some can have a bespoke image and I won’t have to change the include file.

I can of course just change it and write specific HTML for each site, but thought I would ask!

A quick Google search revealed:

[URL=“https://www.google.com/#hl=en&sugexp=les%3B&gs_nf=1&tok=xncug6R7viBUPpHKYHpPqQ&cp=18&gs_id=1y&xhr=t&q=html+image+in+link&pf=p&sclient=psy-ab&newwindow=1&safe=off&oq=html+image+in+link&gs_l=&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.&fp=8c59cb73583b9544&biw=1407&bih=671”]

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglink

http://www.quackit.com/html/codes/html_image_link_code.cfm

http://www.echoecho.com/htmllinks06.htm

You can use a simple image replacement technique, as demonstrated here:

http://www.pmob.co.uk/temp/headerreplacement3.htm

Just add in an empty span (or other inline element like <b></b> and use CSS to position this over the text.