RapidWeaver Snippets Button

Replacing Text with an Image Using jQuery

I had a request from a customer recently who’s responsive site created a drop down menu when the users screen was under a certain size (standard for all responsive designs and done for mobile devices in this instance). The drop down menu on mobile simple displayed the text “MENU” though the user wanted to replace that with an image instead. Fortunately this is very simple to do with JavaScript, though I thought this was worthwhile to save here as a snippet in case it benefits other users as well.

The HTML in this example is as follows:

1
<a href="http://YOUR_HOME_PAGE.com" class="imageSwitch">MENU</a>

1
2
3
4
5
6
$().ready(function () {
    $('.imageSwitch').each(function () {
        string = $(this).text('MENU');
        $(this).html('<img src="YOUR_IMAGE_LOCATION/NAME.png" alt="' + string + '" />');
    });
});

Obviously the image source (SRC) needs to change to the image location and name of your image. Likely you’ll have this image uploaded in your Resources section, which you can then click on the image and see the uploaded directory and name provided that you’ve already published your site.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/rapidweaver-snippets/replacing-text-with-an-image-using-jquery/">
RSS

One thought on “Replacing Text with an Image Using jQuery

  • By zeeshan safder - Reply

    Thank you..this code works.

Leave a Reply

Your email address will not be published. Required fields are marked *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>