Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: incrediBILL

Message Too Old, No Replies

Question about hovering over a link.

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

New User

joined:Sept 21, 2011
posts:31
votes: 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)
8:39 pm on Oct 2, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Yes, but it takes JavaScript. HTML alone can't do it.
5:12 pm on Oct 3, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 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.
9:29 pm on Oct 21, 2011 (gmt 0)

Junior Member

joined:Oct 19, 2011
posts: 52
votes: 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
6:14 pm on Oct 22, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 30, 2009
posts: 130
votes: 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.
2:40 am on Oct 23, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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.
10:33 am on Nov 1, 2011 (gmt 0)

New User

joined:Oct 21, 2011
posts:4
votes: 0


a:hover img {display:block;}

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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members