Pink Using an Image as an input button.

Dgswaner · 2007-10-10 21:16

Yes, I've tried html forums, they are no where near as helpful as this site.

I swear I had this problem solved, so I made a graphical interface for web controlling a bot but now that I'm trying to get the pages to work on the pink it doesn't seem to work.

Here is a sample page. so you can see the problem. 71.219.98.215/controltest.htm

The regular submit buttons work fine, but when I try to use an image, It's returning the X value of the position on the image that was clicked. you can see what I mean by clicking on the left side of the Image vs the right side. I thought it was random at first, but it's not random.

I've done a lot of reading and I guess this is typical to return the x and y value of the click, but it's also supposed to return the value of the Value=" " statement. at least with Foxfire. IE doesn't support this.

Is there something I'm missing? This should work from what I have read.

I could use this as is but I would have to do a big huge work around and use a variable for each direction. I really would like a solution not a work around. and comments are welcome.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

skylight · 2007-10-10 23:28

looking at the source shouldnt the line for the arrow have an input name= statement like the other lines do?

Dgswaner · 2007-10-11 05:30

the name= tag was there it was just at the end. I put it in the same order but still no go. I'm starting to think it's not possible, at least as a string. I will have to use the X coordinate value to determine if the button is pressed,

I think what I'll do is just use it as is and then on the Processor side I'd watch for a value change, when it happens I'll set the value back to 0 and start watching again.

here is what I found about the image tag.
IMAGE: Create a graphical submit button rendered by an image rather than a text string. The x and y values of the location clicked are passed to the server: In the submitted data, image fields are included as two name/value pairs. The names are derived by taking the name of the field and appending ".x" for the x value, and ".y" for the y value.
www.webmaster.crevier.org/tags/TAG_INPUT.html

anyone else have any other ideas?

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Harrison. · 2007-10-11 09:03

This can all be done in javascript. I don't have time right now, but I could whip up an example this weekend.

Basically, what you want to do is use a link onclick event and then submit the form manually. This is a bit complicated, but it will give cross browser compatibility.

Franklin · 2007-10-11 15:57

Where is the submit for the arrow?

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
- Stephen

Dgswaner · 2007-10-11 19:13

Submit is what gives you the ugly gray button, you have to change type="submit" to "image" to get the image to show at all. from what I can tell the code is actually working the way it is supposed to. but it's not how I want it to work. I also don't think it's possible to get the Y value using this command.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Dgswaner · 2007-10-12 20:48

Harrison, I'd love a sample script, I'm much better at modifying code as apposed to coming up with something new.

If your ever passing though Utah let me know I owe you a steak dinner! let me know if there is anything I can help you with.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Harrison. · 2007-10-15 06:16

Here's the example I promised. Sorry about how long it took. I was lazy and totally forgot about this.

The following example uses document.forms[noparse][[/noparse]0].elements[noparse][[/noparse]0] to access the hidden field. This should allow ultimate browser compatability, but it does mean you cannot have any other form fields on the page.

<html>
<head>
<title>Control Test</title>
<script language="javascript">
function sform(dir) {
    document.forms[noparse][[/noparse]0].elements[noparse][[/noparse]0].value = dir;
    document.forms[noparse][[/noparse]0].submit();
    return false;
}
</script>
</head>
<body>

Last Command: <Nb_var01><br /><br />

<form name="frm" id="frm" action="controltest.php" method="post">
<input type="hidden" name="Nb_var01" id="Nb_var01" value="">
</form>

<a href="#" onClick="return sform('forward');"><img src="forward.png"></a>
<a href="#" onClick="return sform('reverse');"><img src="reverse.png"></a>
<a href="#" onClick="return sform('left');"><img src="left.png"></a>
<a href="#" onClick="return sform('right');"><img src="right.png"></a>

</body>
</html>

For multiple forms and fields, use the following script section. This should work in all modern browsers, but I am not sure if it'll work on things like old PDAs and such.

<script language="javascript">
function sform(dir) {
    document.frm.Nb_var01.value = dir;
    document.frm.submit();
    return false;
}
</script>

EDIT: typo

Harrison

Post Edited (Harrison.) : 10/15/2007 6:23:28 AM GMT

Paul · 2007-10-15 13:03

I've been using multiple virtual buttons in forms (in IE)·with this code:

    <div id="Button" style="position:absolute; z-index:10; visibility:visible; left:0px;top: 20px;">
        <!-- MUST leave the LF in the following line -->
      <INPUT name="Nb_var10" type="hidden" value="0
"><INPUT type="image" src="image/button.GIF" border="0"></div>

Each 'button' has its own x-y value defined in LEFT: and TOP: and each button has a different 'name'. Note that you have to leave the Linefeed in the INPUT value. This puts·the required·terminating LF in the Nb_var.
Don't know if·you could put in the same name with different values for each button. I would think it would work.
Paul

Dgswaner · 2007-10-15 14:31

Harrison your definitely on my Christmas list! it Works Great! thanks for your time, one thing, you code says: action="controltest.php" I didn't know if I was supposed to name my file .php, the code didn't work at first because I had .htm so I changed the code to controltest.htm and it works. Thanks for your time on this, I'm getting really close to completing my web enabled bot.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Dgswaner · 2007-10-15 21:51

Paul, I can't get your code to work, I'll dig into it a little deeper when I get home, are you saying that it returns the x and y values, or is that just the position in the page? from what I can tell it's the latter.

are either of you familiar with Ajax, that's the only thing I will have left as far as the web interface. it will work with out AJAX but that will just add icing to the cake!

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Harrison. · 2007-10-16 01:11

Ajax is actually quite easy to do when you use a premade framework. What I recommend is taking a look at mootools (mootools.net/). Mootools gives you very streamlined access to page elements while also incorporating a nice ajax api.

Pink Using an Image as an input button.

Comments