Link to home
Start Free TrialLog in
Avatar of gretchen
gretchen

asked on

Submit Image In A Form : Depress

I have a form where I use an Image as the submit button.  However, when you click the image, the image does not depress like a normal submit button.

Is there anyway to make the button depress in and then out? Like a normal submit button.  This is the code I am using.

<input type="image" src="images/updatebtn.gif" name="submit" value="Update" alt="Click Here To Add Story To The Database" align="absmiddle"></td>
Avatar of jpanderson
jpanderson

You should up the points to at least 50 or 100 but here you go.
You need to create a second picture that is the depressed view.
Then you need to use javascript...I will list a sample below.  You need to change firstpicture.gif and secondpicture.gif to your own files and change the height and width to match.

<HTML>
<HEAD>
<TITLE>type_Document_Title_here</TITLE>

<SCRIPT language="JavaScript">
<!--
var bn=navigator.appName;
var vn=navigator.appVersion;
var p1=null;
// Animated menu stuff
function off_img(loc,img) {};
function on_img(loc,img) {};

function gonow(p)
  {
  location=addr[p];
  };

var addr = new Array(1);
addr[1]="www.home.com";
menuimg = new Array(2);
if ((bn!="Microsoft Internet Explorer") || (vn.substring(0,3)!="2.0"))
{
menuimg[1]= new Image (20,20);
menuimg[1].src="firstpicture.gif";
menuimg[2]= new Image (20,20);
menuimg[2].src="secondpicture.gif";
}

function on_img(loc,img)
  {
  if ((bn!="Microsoft Internet Explorer") || (vn.substring(0,3)!="2.0"))
    loc.src=menuimg[img].src;
  }

// -->
</SCRIPT>
</HEAD>
<BODY>
<h2>Animated Buttons</h2>
<a href="javascript:gonow(1)" onMouseOver="on_img(p1,2);self.status='whatever';return true"onMouseOut= "on_img(p1,1);self.status='whatever';return true">
<img src="firstpicture.gif" name="p1" alt="whatever" border=0 width="20" height="20"></a><br>
</BODY>
</HTML>
Avatar of gretchen

ASKER

Actually your answer, just does a rollover -> Not A Depress.  For your's to work based on my question asked you would have to change your onMouseOut event to onMouseDown.

Also, When I do roll-overs I use this code, since it is a lot easier to use.  I am not if there is a downside as opposed to your code, but it works under IE, and netscape.

<A HREF="http://mupage.asp"
   onMousedown = "document.images['HOMELNK'].src='images/HOMELNK1.gif'"
    onMouseOut = "document.images['HOMELNK'].src='images/HOMELNK.gif'">
<IMG NAME="HOMELNK" SRC="images/HOMELNK.gif" BORDER=0></A>

gl
In my first paragraph I said change your onMouseOut, It should have read onMouseover.  onMouseout is required because if the user hold's the mouse button down and does not release and the onmouseout event is not specified the image will remain the onMousedown image.

gl
OK gretchen it should be onMouseDown instead of on onMouseOver.
Can't seem to get yours to work though.
Sorta got yours to work but the image won't appear intill i put the mouse over it.
Make sure you have the img tag included in the anchor.  Also the

document.images['HOMELNK']. ....
<IMG NAME="HOMELNK" ....

have to be the same name, and it is case sensitive.  
Ok I've posted it on the net so that you can let me know what I did wrong.
This one is yours: http://www.jpanderson.com/whatever2.html
And this one is mine: http://www.jpanderson.com/whatever.html
They just go back and forth when you click the link.
onMouseOut="document.images['HOMELNK'].src='image/accuresume003.gif"

On this one your missing a '

<IMG NAME="HOMELNK" SRC="images/accuresume003.gif" BORDER=0 Width=134 height=35></A>
</BODY>

the above image is missing because I believe you meant image instead of images.

This should fix it, correct it and let me know and I will check it again...

gl
Ok made some changes but just can't seem to get the image to depress on your script.  Have another look and see if you can see whats wrong.  Who is helping who here?
Not tested, but I do not see the consistency in your use of '' and "".
Try instead:

<A HREF="http://www.jpanderson.com/whatever.html"
onMousedown="document.images['HOMELNK'].src='image/accuresume002.gif'"
onMouseOut="document.images['HOMELNK'].src='image/accuresume003.gif'">
<IMG NAME=['HOMELNK'] SRC='image/accuresume003.gif' BORDER=0 Width=134 height=35></A>
<A HREF="http://www.jpanderson.com/whatever.html"
onMousedown='document.images'['HOMELNK'].src='image/accuresume002.gif'
onMouseOut='document.images'['HOMELNK'].src='image/accuresume003.gif'>
<IMG NAME=['

Notice your ' before document, those need to be encased in "

here's a correct version to follow, just change your image path and names

<A HREF="http://www.jpanderson.com/whatever.html"
   onMouseDown = "document.images['HOMELNK'].src='image/HOMELNK1.gif'"
    onMouseOut = "document.images['HOMELNK'].src='image/HOMELNK.gif'">
<IMG NAME="HOMELNK" SRC="image/HOMELNK.gif" BORDER=0></A>

The key is to follow exactly the ' " and where they are located.
Hey Gretchen, that is what I said... :)
I am glad to see though that I was on the right track.  As for your question, are you still needing an answer?

davlun
No, I guess I am not really needing an answer.  I was just hoping maybe to find something a little easier than having to do rollovers.

gl
Got it now!
I am needing an answer, I cant get this to work for a form.  Here is what I have and it is not working.  I beleive it is not working because I do not have an image set with a name.

 <form>
      &nbsp;&nbsp;&nbsp;<input name="search">
        <input type="image"  src="images/buttonsearch.gif" align="absMiddle" border="0"  name="Submit"
           onMousedown = "document.images['Submit'].src='images/buttonsearchblk.gif'"
         onMouseOut = "document.images['Submit'].src='images/buttonsearch.gif'"
             value="Search" alt="Search Database For A Story"></FONT>
   </td>
   </form>
you could use stylesheets to change the background of your inputbox to an image

<style>
INPUT
{BACKGROUND-IMAGE: url(file://C:\whereveryourfileis\Logo.gif)}
</style>
ASKER CERTIFIED SOLUTION
Avatar of fruey
fruey
Flag of France image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Adjusted points from 25 to 100
2 for 2 today.  Thank you very much.  
I adjusted the points up for you since in my opinion have gone over and beyond in helping me.

I ended up having to use the document.formname.submit because the regular this.form.submit did not want to work..

Thanks Again!
Anytime, Gretchen. Glad you got it working.

Is it a public site? Would like to see it in action.

simon_music@yahoo.fr if you don't want to post it here.
We are not up yet, actually what I am coding right now is not going to be public.  I am writing a web based front end to a database so users can enter information into a database and that information will eventually be displayed on the web page.  Even though the general public will not see this, I still like to spice it up.  Not to mention, I always enjoy learning.

Again, I would like to say thank you for all your help.


gl
I wish I had the time (or my clients had the money) for me to spice up some of my awful db display pages. Back end works fine... but front end leaves a lot to be desired. Keep up the good work, and good luck with the project!