Emulate appearance of a link with javascript

Question

Hi,

I need to open links with javascript (window.open) when the user clicks on positions in a google-maps map.

How do I make the user understand that it is a link, that he can click it, and where he will end up when he has clicked it?

Among other things, while the user is hovering over a map position, the URL of that position should be shown in the status-bar, just like with a normal link in firefox.

How do I do that?

Thanks

dontomaso

Answer 1

Ok I don't know much about how google map manage JS code so I try to give you a general help:

you could create a DIV (with width and height of the rectangular area you want) and then put it with background-color transparent positioned in absolute coordinates where you want into the map.

then write onmouseover and onclick handlers for it so when the user goes over on it you do a change to the mouse shape (from pointer to hand) and when it clicks it open the url.

for the status bar when the user over on a map poistion you can do:

window.status = (getURL)

Answer 2

You can create a simple link and then put an onclick listener on it using unobtrusive Javascript techniques. When the user clicks the link you intercept the click event, prevent the default action, read the href attribute and open the window. Kinda like this:

<a href="http://www.example.com" id="myLink">link</a>

$("#myLink").on("click", function(event) {
    event.preventDefault();
    myFunctionToOpenWindowForUrl(this.href);
});

This is using jQuery, of course you could adapt it to any other JS library you might be using. This way you will also see the original URL in the status bar, because that is the natural thing for a link - no need for extra coding. Also your links will work even without Javascript, which makes this approach way better than styling a span for instance to look like a link and then attach the listener to it.

Answer 3

You can modify the cursor to appear as a pointer by using CSS(cursor:pointer;)

Furthermore, you can put the destination into the title tag, so the user will see the destination if he moves the mouse over the element.

Answer 4

try something like this:

<a href="javascript:void(0);" onclick="yourAction()" onmouseover="window.status='status bar';">link</a>

href="javascript:void(0);" will show link as it should, if you would put here href="#" it would just scroll on top of the page. Href has to be set to have usual link display.

onmouseover="window.status='status bar';" will set status in window on mouse over.