CODEWITHSUNDEEP
javascriptasp.netgif
brightmist.co.uk
brightmist.co.uk

Reputation: 515

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

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>

Upvotes: 0

Views: 3369

Answers (3)

JoshNaro
JoshNaro

Reputation: 2097

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.

Upvotes: 3

Joel Coehoorn
Joel Coehoorn

Reputation: 416081

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.

Upvotes: 0

Fenton
Fenton

Reputation: 251162

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.

Upvotes: 0

Related Questions