Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change image src of button type="image"

Status
Not open for further replies.
Guern

Guern

Programmer
Jun 22, 2001
91
GB
Hi,

This is driving me a little crazy!

I have the following line

<input name="searchb" type="image" src="../graphics/button_go_big.gif" width="65" height="66" OnClick="this.src='/graphics/icons/busy8.gif';">

This works fine in browsers other than ie. The image changes as the form submits. In IE of course animated images stop when the form is submitted.

I've tried to implement the settimeout trick I've seen elsewhere, but it wont work with 'this' in a seperate routine. It also does not seem possible to directly reference the object via document.forms['form1'].elements['searchb'].src

Any idea how I get this to work in all browsers whilst keeping the image type as input?

Thanks.

Paul Smith
Microtech Limited
 
Sort by date Sort by votes
Thanks,

Yes, I might have to. Only problem is that stops the form working for anyone without javascript support.
 
Upvote 0 Downvote
I've tried to implement the settimeout trick I've seen elsewhere, but it wont work with 'this' in a seperate routine
Click to expand...

Retry the setTimeout trick and don't pass 'this', pass this.id and reference the input with an id.

[monkey][snake] <.
 
Upvote 0 Downvote
Hi,

I did try that and could not get it to work. Looking on the elsewhere I have read that the .src of a input type=image is not able to be referenced in this way. Certainly all the combinations I tried didn't work.

Do you have an example of how you would reference the src?

Thanks.

Paul Smith
Microtech Limited
 
Upvote 0 Downvote
I wrote this up and it works fine (changing the img src on input type="image"):

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html>
<head>
<script type="text/javascript">
   function changeSrc() {
      document.getElementById("thisImage").src = "191.jpg";   
   }
</script>

</head>
<body>
<form method="post" action="">
<input id="thisImage" type="image" src="190.jpg" />
<input type="button" value="Change Source" onclick="changeSrc()" />
</form>
</body>
</html>

[monkey][snake] <.
 
Upvote 0 Downvote
Hi,

Many thanks for the example. Yes, this does work, but my image is not actually just an image on the page, it's actually the submit button as well. I'm using an image instead of a button like this

<input name="searchb" id="thisImage" type="image" src="../graphics/button_go_big.gif" width="65" height="66" OnClick="changeSrc()">

This doesn't work when you try to change the image source.

Any ideas?

Paul Smith
Microtech Limited
 
Upvote 0 Downvote
>This doesn't work when you try to change the image source.
As you know it is by itself a submit button, the page has got submitted and the page is loaded afresh (there is not much time to observe the trascient effect): meaning the same original src is again displayed. That's why. To convince oneself, stop the submit like this.
[tt]
<form [blue]onsubmit="return false;"[/blue]> <!-- with other handling and attributes -->
<!-- etc etc -->
<input name="searchb" type="image" src="../graphics/button_go_big.gif" width="65" height="66" OnClick="this.src='/graphics/icons/busy8.gif';">
</form>
[/tt]
 
Upvote 0 Downvote
Thanks tsuji,

My first example actually DOES work fine, just not in IE as IE stops the animation of GIF's as soon as the form is submitted.

The page being submitted can take several seconds to start loading, hence the animated waiting gif. The solution, or so I have read, is to use settimeout to change the image source 100ms or so after the button has been clicked and the form submitted. This seems to have the problem though that the only way I can find to reference the src is via this.src, which does not work with settimeout. The src of a input type=image does not seem to be available to reference in another routine?

So my problem is how to get this working in IE (keep the graphic animating). It works fine in other browsers.

Paul Smith
Microtech Limited
 
Upvote 0 Downvote
If this can be done, it will be done by reloading the image in the onsubmit call on the form.

[monkey][snake] <.
 
Upvote 0 Downvote
alternatively, show a hidden floated div with a please wait image.

I also have used the onsubmit to display hidden text to inform user to wait.

But all this required JS and as you mentioned, it won't work without JS enabled.

You may be able to use pseudo classes and CSS to achieve this.

:hover
:active

but it won't work for IE6 or below!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
This is what I was referring to:

Code: 
<form id="blah" method="post" [!]onsubmit="document.getElementById("searchb").src = '/graphics/icons/busy8.gif'"[/!]>
   <input [!]id="searchb"[/!] name="searchb" type="image" src="../graphics/button_go_big.gif" width="65" height="66" />
</form>

I'm pretty sure this will work, because I've done a similar thing before.



[monkey][snake] <.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
699
Mike Lewis
Mike Lewis
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
122
gmmastros
gmmastros
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
267
Rayj0000
Rayj0000
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
344
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
314
malpa
malpa

Part and Inventory Search

Sponsor

Back
Top