Question

I’ve got certain regions of the page that, when clicked, will redirect the user to certain addresses. My problem is that when the user ‘mouses over’ these regions, they see a pointer, but have no idea where it links to. For my purposes it is important that the user knows where they are being linked to. I believe Google displays ‘fake’ links when you mouseover links.

How can I achieve this? Is it impossible without having actual <a> tags?

I’m currently using location.href="http://www.site.com" to redirect the user where "site" is stored in a javascript array and changes depending on the mouse position.

EDIT: The link should be displayed in the normal mouseover link area – in chrome this is the bottom left corner – just like when you mouseover an ordinary link and you see where the link leads to.

Answer 1

I don’t believe this is possible without using <a> tags, the best you could hope for is to use the title attribute to show a tooltip.

e.g.

<div title='www.google.co.uk' style='cursor:pointer'>
 This is my div!
</div>

Using anchor links (as Google does), you can do something like:

<a href="http://www.mwhahaha.com"
   onmouseover="this.href='http://www.test.com';"
   onmouseout="this.href='http://www.mwhahaha.com';"
   onclick="this.href='http://www.mwhahaha.com';">Link</a>​​​​​​​

This will show a link that looks like it’s going to http://www.test.com, but clicking it actually goes to http://www.mwhahaha.com, although I’m not sure how legal/good practice this is (only tested this in Chrome)…