?
Solved

Change Input Type=Image src

Posted on 2006-04-26
11
Medium Priority
?
1,269 Views
Last Modified: 2012-06-21
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~
0
Comment
Question by:jenndo
  • 3
  • 3
  • 2
  • +2
11 Comments
 
LVL 20

Expert Comment

by:Gawai
ID: 16543566
<input type=image name=imgName src=images/submit.gif>
is that u are loooking for ?
0
 
LVL 43

Expert Comment

by:TimCottee
ID: 16543569
Hi jenndo,

Just set it:

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

Tim Cottee
0
 
LVL 20

Expert Comment

by:Gawai
ID: 16543607
<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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jenndo
ID: 16543808
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
 
LVL 43

Expert Comment

by:TimCottee
ID: 16543995
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
 

Author Comment

by:jenndo
ID: 16544191
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
 
LVL 8

Expert Comment

by:Leo Eikelman
ID: 16544277
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
 
LVL 8

Expert Comment

by:Leo Eikelman
ID: 16544309
sorry the first line

SS:

this section is actually

CSS:


Leo
0
 
LVL 8

Accepted Solution

by:
Leo Eikelman earned 1400 total points
ID: 16544331
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
 
LVL 7

Assisted Solution

by:timker
timker earned 600 total points
ID: 16548261
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
 

Author Comment

by:jenndo
ID: 16551727
Thanks guys, this did work for me. And good catch timker, I was wondering why it was working when I first tried it.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:   The Exchange of informatio…
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
When cloud platforms entered the scene, users and companies jumped on board to take advantage of the many benefits, like the ability to work and connect with company information from various locations. What many didn't foresee was the increased risk…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question