Replacing image src with input hidden value using Jquery

Question

Hi Guys,

I have below input hidden with value ="/fr/images/findacourse_logo_tcm10-268.gif".

<input type="hidden" id="Qt_Email_Image" value="/fr/images/findacourse_logo_tcm10-268.gif"/>

I have another input image below with src = "/images/quote/Quote_Email_Button.JPG"

<tr>
    <td>
      </td>
    <td colspan="2" class="">
     <input type="image" border="0" alt="Email me this quote " src="/images/quote/Quote_Email_Button.JPG" id="Quote_btnEmail" name="Quote:btnEmail"/>
    </td>
</tr>

Now I want at runtime the input image src gets replaced with above input hidden value and will show above image instead of image link in src. So that my above html becomes

<tr>
    <td>
      </td>
    <td colspan="2" class="">
     <input type="image" border="0" alt="Email me this quote " src="/fr/images/findacourse_logo_tcm10-268.gif" id="Quote_btnEmail" name="Quote:btnEmail"/>
    </td>
</tr>

I want to use Jquery for above solution, please suggest!

Thanks.

Answer 1

This should work for you:

$('#Quote_btnEmail').attr('src', $('#Qt_Email_Image').attr('value'))

Answer 2

$('#Quote_btnEmail').attr('src', $('#Qt_Email_Image').val());

Is that what you need?

Answer 3

Note that when you replace image like this:

$('#Quote_btnEmail').attr('src', $('#Qt_Email_Image').attr('value'))

Then your current image "Quote Email Button.JPG" is being removed, then new image "findacourse logo tcm10-268.gif" is loaded and then shown. So if the loading part takes a while, then the user will see a flicker.

To avoid that, you can load your "findacourse logo tcm10-268.gif" first and then instantly show it to the user:

var img = new Image();
$(img).load( function () {
    $('#Quote_btnEmail').attr('src', img.src);
});
img.src = $('#Qt_Email_Image').val();