using GET input type IMAGE 1

[bdichiara]

I have a form that uses the GET method and it contains only 2 elements. 1 Input called search and 1 input that is an image (for the submit button).

1. first problem is for some strange reason, in firefox, the image is only "clickable" near the outer edges. It doesn't work very consistent.
here's that code:

<input type="image" value="Submit" alt="Submit" src="img/go_normal.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('search_btn','','img/go_hover.jpg',1);" id="search_btn" />

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

2. second problem is when my form submits, it tacks on x=0&y=0 Or if you click, x=5&y=20. Is there away to disable that? I just want the 1 element (search) to be put in the URL. here's the code for that:

<form id="search_box" name="search_box" action="index.php" method="get" style="margin:0px; padding:0px;">
  <table width="258" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="56" align="right" valign="top"><img src="img/search.jpg" alt="search" width="56" height="39" border="0"></td>
      <td width="149" align="center" valign="middle" style="background-image:url(img/search_box.jpg); background-position:top; background-repeat:no-repeat;" onClick="document.search_box.search.focus();"><input name="search" type="text" class="search" id="search" style="width:140px; border:0px;" maxlength="255" border="0" onFocus="showPopup();" /></td>
      <td align="right" valign="top"><input type="image" value="Submit" alt="GO" src="img/go_normal.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('search_btn','','img/go_hover.jpg',1);" id="search_btn" /></td>
    </tr>
  </table>
</form>

_______________
_brian.

 

[BillyRayPreachersSon]

I'm not a betting man, but I'd put money on problem 1 being caused by some CSS / other styling (possibly even on other elements). Do you have a URL we can view the problem at? Does the problem go away if you remove all CSS and inline styles from your page?

To solve problem 2, change the input type from "image" to "button" or "submit", and use a background image on the button. Actually, having said that, a better suited solution would probably be to wrap the image in a "button" element with an onclick:

<button onclick="somethingHereToSubmitForm();"><img src=... etc ... /></button>

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cLFlaVA]

i prefer BRPS's background-image suggestion over the button suggestion. onclick only works if javascript is enabled.

boo, javascript!



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[bdichiara]

It's for an intranet site, so no public URL, and the javascript shouldn't be a problem. All computers should have it turned on.

_______________
_brian.

 

[ChrisHunt]

1. Dunno why that would happen. First thing I'd try is taking out the javascript mouseover stuff, and any other fancy stuff that you've not told us about. Simplify the situation until it works, then add the stuff back one-by-one till you find the problem.

2. That's how image inputs work - they send the x & y coordinates of where you clicked on the image. It's because they're really intended for server-side image maps. My advice would be not to worry about it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[vacunita]

I agree with ChrisHunt take the Javascript off and see if it works.

The X and Y bit, well unless you intend on changing the behavior of the form element, there is nothing you can do.

some simple CSS over a standard input type=submit button would solve the problem.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BillyRayPreachersSon]

bdichiara,

Did you resolve your problem?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bdichiara]

well, since the clicking problem is only in Firefox, and 99% of the users will be accessing this with IE, it's not that big of a deal, I've tried all the suggestions, but can't seem to figure it out.

The X and Y thing was resolved by placing a roll-over image there and wrapping a link tag around it to validate and submit my form.

Thanks.

_______________
_brian.