Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    redirect when mouseover

    Would some kind person please tell me how to redirect a web page to a new URL when the mouse goes over an image. I know it is usual for the event to occur when the mouse button is clicked on the hyperlink, but onmouseover is what I need.

    Thanks in advance

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Code:
    <img src="…" alt="…" onmouseover="window.location.href='newpage.html';" />
    Bear in mind that users may mouseover the img accidentally and may not understand what's happened when they're suddenly taken to a new page.
    i.e. use with extreme caution (imho, don't use at all)

    Also, bear in mind that those who use keyboard to navigate around pages almost certainly won't be catered for by this process.
    You might partly account for more users by keeping the img within an anchor which has the new url as its href.

    e.g.
    Code:
    <a href="newpage.html"><img src="…" alt="…" onmouseover="window.location.href='newpage.html';" /></a>
    Last edited by Bill Posters; 05-22-2006 at 01:02 PM.

  • #3
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Just a little bit cooler (and with one less thing to change when you change the code) than Bill's final suggestion:

    Code:
    <a href="newpage.html">
      <img src="…" alt="…" onmouseover="window.location.href=this.parentNode.href;" />
    </a>

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Heck, if we're going to be using the anchor for sure, then we may as well use the onmouseover directly in the anchor element.

    Code:
    <a href="newpage.html" onmouseover="window.location.href=this.href;"><img src="…" alt="…" /></a>
    Fwiw… The reason I reiterated the url in both elements was so that, if the OP didn't go for the parent anchor idea, the method would still remain usable and obvious.

    (I'd also be inclined to leave out the whitespace in this instance [an inline passage], to head off potential future issues with walking through the branch using childNodes. Whitespace is seen as a child by some browsers, but not others.)

    A minor point and one largely of personal preference.

  • #5
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your answers. Great help.

    Regards Snowycat


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •