Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 209
  • Last Modified:

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>
0
gretchen
Asked:
gretchen
  • 10
  • 6
  • 3
  • +2
1 Solution
 
jpandersonCommented:
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>
0
 
gretchenAuthor Commented:
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
0
 
gretchenAuthor Commented:
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
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
jpandersonCommented:
OK gretchen it should be onMouseDown instead of on onMouseOver.
Can't seem to get yours to work though.
0
 
jpandersonCommented:
Sorta got yours to work but the image won't appear intill i put the mouse over it.
0
 
gretchenAuthor Commented:
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.  
0
 
jpandersonCommented:
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.
0
 
gretchenAuthor Commented:
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
0
 
jpandersonCommented:
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?
0
 
davlun20080Commented:
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>
0
 
gretchenAuthor Commented:
<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.
0
 
davlun20080Commented:
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
0
 
gretchenAuthor Commented:
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
0
 
jpandersonCommented:
Got it now!
0
 
gretchenAuthor Commented:
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>
0
 
anyanickyCommented:
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>
0
 
frueyCommented:
Your code, Gretchen
<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>

.... appears to be ok, but if you say it isn't working how about this idea: I always try other methods which do essentially the same thing. Here I suspect that the "input type=image" doesn't behave like a normal image, so maybe that's why the onmousedown isn't changing it. So... try plan 'b' :-)

Make it a normal image, and have a javascript submit do the work

<form name="myform">
      &nbsp;&nbsp;&nbsp;<input name="search">
  <img 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'"
onClick = this.form.submit()
value="Search" alt="Search Database For A Story"></FONT>
   </td>
   </form>

Does that help?
If this.form.submit is a problem, the alternative is document.myform.submit()
0
 
gretchenAuthor Commented:
Adjusted points from 25 to 100
0
 
gretchenAuthor Commented:
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!
0
 
frueyCommented:
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.
0
 
gretchenAuthor Commented:
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
0
 
frueyCommented:
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!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 10
  • 6
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now