Change Input Type=Image src

Is there a way to change the "src" value of an Input type=image using JavaScript? When a person clicks the image it calls a javascript function, and I need it to toggle the image.
Thanks~
jenndoAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GawaiCommented:
<input type=image name=imgName src=images/submit.gif>
is that u are loooking for ?
TimCotteeHead of Software ServicesCommented:
Hi jenndo,

Just set it:

<input type=image onclick="this.src='http://something.com/image.jpg';doSomethingElse();">

Tim Cottee
GawaiCommented:
<form>
<input type=image name=imgName src=images/submit.gif onclick=TogleImg()>
</form>

u need a javascript to change the image like :
TogleImg() {
   document.forms[0].imgName.src=images/newImage.gif;
}
try this and let me know



Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

jenndoAuthor Commented:
TimCottee, that did work, thanks!
Now I have another problem dealing with the toggling of the image source though. I can get the image to toggle once, but when I click it again I can't get it to toggle back. Here is the code that I have:

<% Dim toggleval
toggleval = "hide"
                  %>
                  <input type="hidden" Name="RunReport" value="<%=label("ShoAllFie")%>">
                  
                  <input type="image" Name="ShowOptions" src="../images/hideoptionsL.gif" onclick="<%If toggleval = "hide" then
                        toggleval = "show" %>
                        this.src='../images/showhideoptions.gif';
                        <% else
                        toggleval = "hide" %>
                        this.src='../images/hideoptionsL.gif';
                        <% end if %> toggle_options();return false;">
TimCotteeHead of Software ServicesCommented:
jenndo,

Try this:
<input type="image" name="ShowOptions" src="../images/hideoptionsL.gif" onclick="if(this.src.indexof('hideoptions')>0){this.src='../images/showhideoptions.gif'}else{this.src='../images/hideoptionsL.gif'};toggle_options();return false;">

Tim
jenndoAuthor Commented:
For some reason it seems like it doesn't recognize the onlick after the first time. It will toggle the image once and that's it, even trying the last example you gave me Tim. I'm baffled. Is there a reason why the Onclick wouldn't be recognized or something?
Leo EikelmanDirector, IT and Business DevelopmentCommented:
what about using something like this:

SS:

..closed
{
display: none;
}

..opened
{
display: block;
}

HTML:

<img src = "images/open.gif" onclick = "toggle(this, 'list1')">
<div id = "list1" class = "closed">
text
</div>

javascript:

function toggle(imgElem, divId)
{
if(document.getElementById)
{
var divElem = document.getElementById(divId);
if(divElem.className == "closed")
{
imgElem.src = "images/close.gif";
divElem.className = "opened";
}
else
{
imgElem.src = "images/open.gif";
divElem.className = "closed";
}
}
}


cheers,

Leo
Leo EikelmanDirector, IT and Business DevelopmentCommented:
sorry the first line

SS:

this section is actually

CSS:


Leo
Leo EikelmanDirector, IT and Business DevelopmentCommented:
The actuall HTML would look like this:

<html><head><title>Untitled Document</title>
<style type="text/css">
.closed {display:none;}
.opened {display:block;}
</style>
<script type="text/javascript">
function toggle(imgElem, divId) {
if(document.getElementById) {
var divElem = document.getElementById(divId);
if(divElem.className == "closed") {
imgElem.src = "images/close.gif";
divElem.className = "opened";
} else {
imgElem.src = "images/open.gif";
divElem.className = "closed";
}
}
}
</script>

</head><body>
<img src="images/open.gif" onclick="toggle(this,'list1')">
<div id="list1" class="closed">text</div>
</body></html>


Leo

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
timkerCommented:
Tim's code will work with one change:

Try this:
<input type="image" name="ShowOptions" src="../images/hideoptionsL.gif" onclick="if(this.src.indexof('hideoptions')>0){this.src='../images/showoptions.gif'}else{this.src='../images/hideoptionsL.gif'};toggle_options();return false;">

The problem was the text you are looking for in the src value (hideoptions) appeared in both file names (hideoptionsL.gif and showhideoptionsL.gif). I jus changed the name of the second image to showoptionsL.gif instead of showhideoptionsL.gif. I think it was just a typo on Tim's part.
jenndoAuthor Commented:
Thanks guys, this did work for me. And good catch timker, I was wondering why it was working when I first tried it.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.