Robs Programming Junk

Well this week I solved a problem with some highly creative jQuery code. The problem was that IE6 doesnt support images in CSS in an anchor tag. Well I came up with some jQuery code that allows you to easily add images after links with a very high level of control. Far more control than CSS.

<br /> $(document).ready(function(){<br /> $('a').each(function(){<br /> if ($(this).attr('href').match(".pdf") != null) {<br /> $(this).html($(this).html() + " <img src=\"/images/icon.link.pdf.jpg\" border=\"0\" class=\"linkicon\" />");<br /> }else if($(this).attr('href').match(".xls")!=null){<br /> $(this).html($(this).html() + " <img src=\"/images/icon.link.xls.jpg\" border=\"0\" class=\"linkicon\" />");<br /> }else{<br /> // do nothing<br /> }<br /> })<br /> }); <br />

This example illustrates that once the document is ready, iterate each anchor tag and check to see if it's pointing at a PDF or an XLS file, if so, replace the HTML inside the anchor tag with the existing content plus the image itself.

This helps considerably when you want to enable this site wide. You can see that I use the .match() function to see if the URL contains that piece of information.

This code works great if you place it in a footer and then enable it site wide. This also has the advantage that you can have different CSS files for different pages and not worry about includes or copying references. This works regardless of what page content is.

The down side to using this is that the images are not SEO friendly because this is done in javascript and not part of the page content itself.