Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Submit Image In A Form : Depress

Posted on 2000-05-02
22
Medium Priority
?
205 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
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 400 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

Technology Partners: 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!

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

972 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