CODEWITHSUNDEEP
javascripthtml
user993683
user993683

Reputation:

Display link on mouseover

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.

Upvotes: 3

Views: 8099

Answers (2)

gilly3
gilly3

Reputation: 91497

If I remember correctly, Google changes the href of the link to the real url during the mousedown event. Try pressing the mouse button while hovering over a link, but moving your mouse cursor off the link before releasing the button. When you hover over the link again, you should see a new URL.

I'm answering from my phone or else I'd check it myself. They may be doing it differently now.

Upvotes: 0

MadSkunk
MadSkunk

Reputation: 3719

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 www.test.com, but clicking it actually goes to www.mwhahaha.com, although I'm not sure how legal/good practice this is (only tested this in Chrome)...

Upvotes: 6

Related Questions