Adding a hyperlink to an Image (IMG) with jQuery

While spending a bit of time this weekend working on a new color scheme for ChrisHammond.com I came across the need to be able to add a hyperlink to an image (html IMG tag) using jquery. Why would I want to do that? Well, to be honest I didn’t want to go in and modify the “skin” on my DotNetNuke site, but I did want to create a link on the “HeaderGraphic” image in the skin. Originally that image didn’t link anywhere, now, as I am working on fundraising for the The LIVESTRONG Challenge Davis even on June 24, 2012, I wanted to link that graphic to my “philanthropy” page.

Doing this in jQuery is rather easy to do assuming you have a way to target the element, in this case I can target the .HeaderGraphic class (part of the MultiFunction skin for DotNetNuke).

Here is the sample code for adding a hyperlink to an image using jQuery.

<script>
    $(document).ready(function(){
        $('.HeaderGraphic').wrap( 
                 $('<a>').attr('href', '/philanthropy.aspx')
        );
    });
</script>

In order to safely embed this into a DotNetNuke page I’ve added it into the Header setting in the Module Settings for one of the modules at the bottom. That particular module is configured to Display On All pages using the module settings.

If you found this code to be help, I ask that you please donate to my cause on the Philanthropy page. Donate what you feel is appropriate.