Imagemap?

Here's one for the Javascripters here. What sort of Javascript would I inject to allow a user to click on a RENDERed graphic and invoke a handler? Steal the handler from a link on the page, I guess. To take that one step further, how could we capture the x and y position of the mouse click?

I'm asking this question for two reasons:

1) I'd like to give RB users a means to have image maps in their apps by any means
2) The example might help me to create a built-in image map capability in the next release.

Thanks,

-Carl

You wouldn't need JavaScript, because image maps (iirc) are completely rendered via HTML. Basically, you'd need a function (maybe a handle?) that would know the size of the image and let people map out areas for each link (with a similar coordinate system to drawing lines in BASIC, iirc).

I'll poke at it as soon as I get home and see what can be done with RB as is.

Thanks. Well, that's one kind of image map and that's a useful thing and I know how to code that, but it would be even better (for many purposes) if we could just have a handler invoked and get the position of the click.

-Carl

Oh! Oh! Oh... Hmm. I see. Hmm.

That's an interesting challenge.

I was able to get a nice little demo going pretty easy in IE, but it's a little more complex in Firefox. This looks to have some info: www.webmasterworld.com/javascript/3345241.htm

PS: Can we please have a function that evaluates some Javascript code and returns the result, or at least gets the value of a Javascript variable?

div llama
print "llama llama duck"
end div
code$ = "document.getElementById('someDiv').innerHTML;"
print runJS$(code$) 'prints "llama llama duck"

It'd make it a lot easier to implement Javascript libraries as Run BASIC modules, perhaps even minimizing the need for "Ajax-y" widgets to be added to the core language.

Carl, how does the LINK command work?

From what I can tell looking at the JavaScript on a standard Run BASIC page, it looks like when you click on a link, an <INPUT> tag gets appended to the <FORM>. I can only guess, but I think that when the new page gets parsed by the RBP sever, that <INPUT> tag (which looks like it has a number for a name) triggers/calls a command stored in an array.

If this is true, then as it stands, I'm not sure (someone prove me wrong, please) if it's possible to build an image map to do what you want with RBP version 1, because the actual "command stack" that RBP uses to know what to do based on a clicked link can only be accessed by adding links to the page with the LINK command.

That said, if I'm write, adding image maps to RB should be easy, because you can just treat the <AREA> tags like <A> tags/LINK's, add their commands to that stack, and rely on the JavaScript to do the rest.

I'll probably be able to do something, but the form you're suggesting would mean that the program on the server would have to call the client browser, invoke some Javascript and return to the server, which is backwards.

-Carl

Hmm. Didn't someone post an example where they were able to highjack the handler for a link and use it with a button? I was imagining something similar could be done with an image.

-Carl

That only works because there's already a link on the page. I suppose the same would work, but you'd have to have a text link for every imagemap link. If that's okay, then, yeah, it can be done; I was thinking you wanted imagemap links instead of text links.

I'm just looking for something to hold us over, so yes it's okay to hijack a link's handler, and in fact you can just create invisible links just for this purpose:

link #hidden, "", [hander]
;)

-Carl

Here's the JavaScript, and demo (watch the numbers change in the Preview window), at www.hscripts.com/scripts/JavaScript/cursor-position.php

Hey Jerry. Thanks, but what I'm looking for is a capture a mouse click on an image, and then to have the coordinates of that click with 0, 0 being the corner or the image. The click should hijack the handler of a link on the page so that the RB app can do something when the user clicks. Think of the cool stuff you could do with this. :)

-Carl

Carl, it sounds like you're looking for the functionality of an <INPUT TYPE="IMAGE">. Such controls, given a NAME="aName", return the click coordinates as aName.x and aName.y. I'm guessing it's not possible to use one with RB 1.0 because widget NAMEs cannot be set explicitly.

Is the INPUT TYPE="IMAGE" a cross browser thing?

-Carl

Here's a technical reference for HTML 3.2:

www.w3.org/TR/REC-html32#input