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

Just set it:

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

Tim Cottee
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
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



0
 
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;">
0
 
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
0
 
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?
0
 
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
0
 
Leo EikelmanDirector, IT and Business DevelopmentCommented:
sorry the first line

SS:

this section is actually

CSS:


Leo
0
 
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.
0
 
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.