Solved

Submit Image In A Form : Depress

Posted on 2000-05-02
22
192 Views
Last Modified: 2010-04-09
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
Comment
Question by:gretchen
  • 10
  • 6
  • 3
  • +2
22 Comments
 
LVL 4

Expert Comment

by:jpanderson
ID: 2771210
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
 

Author Comment

by:gretchen
ID: 2771272
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
 

Author Comment

by:gretchen
ID: 2771277
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
 
LVL 4

Expert Comment

by:jpanderson
ID: 2771335
OK gretchen it should be onMouseDown instead of on onMouseOver.
Can't seem to get yours to work though.
0
 
LVL 4

Expert Comment

by:jpanderson
ID: 2771358
Sorta got yours to work but the image won't appear intill i put the mouse over it.
0
 

Author Comment

by:gretchen
ID: 2771411
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
 
LVL 4

Expert Comment

by:jpanderson
ID: 2771622
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
 

Author Comment

by:gretchen
ID: 2771659
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
 
LVL 4

Expert Comment

by:jpanderson
ID: 2771744
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
 
LVL 3

Expert Comment

by:davlun20080
ID: 2772021
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
 

Author Comment

by:gretchen
ID: 2773343
<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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 3

Expert Comment

by:davlun20080
ID: 2773442
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
 

Author Comment

by:gretchen
ID: 2773664
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
 
LVL 4

Expert Comment

by:jpanderson
ID: 2773695
Got it now!
0
 

Author Comment

by:gretchen
ID: 2773787
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
 
LVL 1

Expert Comment

by:anyanicky
ID: 2776101
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
 
LVL 4

Accepted Solution

by:
fruey earned 100 total points
ID: 2777573
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
 

Author Comment

by:gretchen
ID: 2777658
Adjusted points from 25 to 100
0
 

Author Comment

by:gretchen
ID: 2777664
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
 
LVL 4

Expert Comment

by:fruey
ID: 2777934
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
 

Author Comment

by:gretchen
ID: 2777971
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
 
LVL 4

Expert Comment

by:fruey
ID: 2778008
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

759 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now