PDA

Click to See Complete Forum and Search --> : image buttons in HTML forms

_LOBO_
05-08-2003, 02:43 AM
Thanks for any help! :D

I need to remplece a button for one image and this part is easy (http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html)but after this the button dosent work, this button simulate the BACK / FORWARD button from the web browser (http://javascript.internet.com/buttons/directions.html).

here is my code:

<FORM>
<INPUT TYPE="image" SRC="../images/arrow_iz.gif" VALUE=" BACK " onClick="history.go(-1)" >

<input type="image" SRC="../images/arrow_de.gif" value="FORWARD" onClick="history.go(1)" >
</FORM>
Charles
05-08-2003, 05:06 AM
The image type input control is a submit button by definition. You want to use the BUTTON element. (http://www.w3.org/TR/html4/interact/forms.html). And because you will end up with buttons that do absolutely nothing for the one in ten users that do not use JavaScript, you should use JavaScript to draw the buttons thereby avoiding looking the fool those one in ten times.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
document.write('<button onclick="history.back()"><img src="../images/arrow_iz.gif" alt="Back"></button>');
document.write('<button onclick="history.forward()"><img src="../images/arrow_de.gif" alt="Next"></button>');
// -->
</script>
khalidali63
05-08-2003, 05:21 AM
just add a return false statement at the end of the tag like this

onClick="history.go(-1);return false;" />

in both statement
_LOBO_
05-08-2003, 07:37 AM
First of all thank you guys:Charles and khalidali63.

Is nothing I can do to just use my own buttons, becouse I use your script Charles ans is really good tnx but u can see that is a button under my button (.gif).

Thanks for any help.
khalidali63
05-08-2003, 07:46 AM
<INPUT TYPE="image" SRC="../images/arrow_iz.gif" VALUE=" BACK " onClick="history.go(-1);return false;" >

<input type="image" SRC="../images/arrow_de.gif" value="FORWARD" onClick="history.go(1);return false;" >


There you go