Javascript - change image source to gif ?! asp.net

Question

I have the below code in a .ascx file as part of an asp.net project. How can I write the javascript to change the image source to a gif?

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Steps123.ascx.cs" Inherits="SwintonTaxiWeb.UserControls.Steps123" %>

<div id="slickShow">

    <div class="<%=stepOneDivClass %>">
            <asp:ImageButton runat="server" ID="GetQuote" 
                CssClass="imgBut swapImage {src: '/images/Quote-Oval-button-(roll-over).png'}"
                ImageUrl="/images/Quote-Oval-button.png" AlternateText="Get Quote" TabIndex="1" />
    </div>
    <div id="rollOver">
        <img src="/images/Roll-over-to-view-steps-two-and-three.png" alt="Roll over to view steps 2 and 3" />
    </div>
    <div id="slideContainer">
        <div class="step-two">
            <asp:ImageButton runat="server" ID="GetCallback" 
                CssClass="swapImage {src: '/images/Call-back-button-(roll-over).png'}" 
                ImageUrl="/images/Call-back-button.png" AlternateText="Get Callback" Width="69" 
                Height="44" TabIndex="2" />
        </div>
        <div class="step-three">
            <fieldset>
                <asp:TextBox CssClass="postcode" ID="postcode" runat="server" TabIndex="0" /><asp:ImageButton runat="server" 
                    ID="go" CssClass="go" ImageUrl="/images/Go-button.png" AlternateText="Go" onclick="Go_Click" TabIndex="1" />
            </fieldset>      
        </div>
    </div>
</div>

Thanks for your help Regards Judi

Answer 1

Using just JavaScript you could do:

var image = document.getElementById('ctl00_MainContent_tester_GetQuote');
image.src = [path to gif];

You could also use jQuery to grab the element via class (or some other selector if you want):

var image = $('.[ClassOfImage]').attr('src', '[NewPathToGif]');

I love the jQuery.

Answer 2

Something like...

document.getElementById("ctl00_MainContent_tester_GetQuote").src = "myImage.gif";

You can use myControl.ClientId in place of "ctl00_MainContent_tester_GetQuote" if you want to keep things dynamic.

Answer 3

The simplest way is like this

 document.getElementById('ctl00_MainContent_tester_GetQuote').src = 'mygifsrc.gif';

But in this case that id is an ASP.Net generated id, and you might not be able to count on it not changing on you. My normal way to work around this is to find a container (like your div, but not part of the custom control) and call something like getElementsByTagName() from there to find the element you need. But as you didn't share your surrounding html I can't yet give you something I know will work.