Question about hovering over a link.

Forum Moderators: open

Message Too Old, No Replies

Question about hovering over a link.

matthayzon89

5:40 pm on Oct 2, 2011 (gmt 0)

Hello,
I am building a website and I was wondering if there is a way to have a list of links on the left and for the pictures on the right to change depending on whatever link the user hovers on, on the left.

For example, if there was a list like the one below with different places and the user JUST hovered (without clicking) on New York, then the picture that would be located to the right of the list would change to a picture of New York, once the user hovers on the paris list item then the picture would change to a picture of Paris.

-New York (LINK)
-Park (LINK)

tedster

8:39 pm on Oct 2, 2011 (gmt 0)

Yes, but it takes JavaScript. HTML alone can't do it.

rocknbil

5:12 pm on Oct 3, 2011 (gmt 0)

Maybe off topic, but why would you want some element on the left to change something on the right? Seems like it's a bit "disconnected," user will be focused on the left (since that's where their mouse is) and may not even look at the image - may perceive it as "ad blindness."

But if you have it as part of the anchor, it can be the hover: of the link to mod the background image. Just a thought.

zabalex

9:29 pm on Oct 21, 2011 (gmt 0)

Hi,
i suspect if it could be done by the css alone. Till date I have done it by the help of java script along with css. CSS for the presentation and java script for the condition.

regards
zabalex

Skier88

6:14 pm on Oct 22, 2011 (gmt 0)

Yes, certainly. Here's one method - there are a lot of alternatives.

<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>hover test</title>
    <style type='text/css'>
      *           {margin:0; padding:0; border:0; outline:0;}
      div         {position:relative; width:500px; margin:20px;}
      img         {display:none; position:absolute; right:0; top:0; width:200px; height:200px;}
      a:hover img {display:block;}
    </style>
  </head>
  <body>
    <div>
      <a href=''>New York <img src='http://i.imgur.com/OsqCe.jpg' alt='New York'/></a><br/>
      <a href=''>Park <img src='http://i.imgur.com/IYQoe.jpg' alt='Park'/></a><br/>
      <a href=''>San Francisco <img src='http://i.imgur.com/eKuYe.jpg' alt='San Francisco'/></a>
    </div>
  </body>
</html>

zabalex - your approach makes a lot of sense, but consider elements like links, for which one would never use javascript to add effects like an underline on hover. I think that conceptually it makes sense to use CSS for anything that doesn't depend on the user's previous interaction with the page - in practice I use CSS whenever I can because it's faster and lighter than javascript.

tedster

2:40 am on Oct 23, 2011 (gmt 0)

Excellent Skier88 - thanks. The moment zabilex said it could probably be done with CSS and no javascript I knew he was right and my earlier comment about needing JavaScript was wrong.

neeraj86

10:33 am on Nov 1, 2011 (gmt 0)

a:hover img {display:block;}

just a script ,,
nothing more than that.
try to get all the knowledge from google about "hover"