Forum Moderators: open

Message Too Old, No Replies

Changing a button to an image?

probably very simple but I'm new!

         

internetheaven

1:46 pm on Dec 29, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I want to use an image instead of the submit button, I've read several tutorials now but am getting nowhere. I have this:

<input TYPE="button" VALUE="GO!" onClick="jump(this.form)">

and I want something like this:

<input TYPE="image" src="/go.gif" onClick="jump(this.form)">

or this:

<a href="javascript:jump(this.form)"><img src="/go.gif"></a>

neither of which works. Any help would be appreciated.

Thanks
Mike

lavazza

6:33 pm on Dec 29, 2007 (gmt 0)

10+ Year Member



Instead of
<input TYPE="image" src="/go.gif" onClick="jump(this.form)">

Try
<img src="/go.gif" alt="some text here" onClick="jump(this.form);">

internetheaven

8:22 pm on Dec 29, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try
<img src="/go.gif" alt="some text here" onClick="jump(this.form);">

Thanks, but no, that didn't work. Probably best if I post the code:

<script type="text/javascript">
<!--
function land(ref, target)
{
lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{
ref=menu.choice.options[menu.choice.selectedIndex].value;
splitc=ref.lastIndexOf("*");
target="";
if (splitc!=-1)
{loc=ref.substring(0,splitc);
target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_blank";};
if (ref!= "") {land(loc,target);}
}
//-->
</script>

with the form being:

<form action="dummy" method="post"><select name="choice" size="1">
<option value="">- - - - - - Select - - - - - -</option>
<option value="/page1.html">Option 1</option>
<option value="/page2.html">Option 2</option>
</select>
<input TYPE="button" VALUE="GO!" onClick="jump(this.form)">
</form>

rocknbil

5:44 pm on Dec 30, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<img src="/go.gif" alt="some text here" onClick="jump(this.form);">

You cannot use this.form if the object is not a form object, which an image . . . isn't. You have to use a document-level reference to the form:

<img src="/go.gif" alt="some text here" onClick="jump(document.forms[0]);">

<img src="/go.gif" alt="some text here" onClick="jump(document.forms['name_or_id_of_form']);">

Although it would create other (minor) issues, it's probably better to use <input type="image"> with server-side manangement in case Javascript is disabled:

<form action="jump_script.cgi" method="post">
.......
<input type="image" VALUE="GO!" onClick="return jump(this.form)">
</form>

Add return false; to the bottom of the jump() function, this will stop the form from actually submitting if Javascript is working.

If Javascript is disabled, jump_script.cgi (or .php, or whatever) will direct to the page selected in the drop-down list.