homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Question about hovering over a link.
matthayzon89




msg:4369795
 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




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

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

rocknbil




msg:4370174
 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




msg:4377832
 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




msg:4378067
 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




msg:4378204
 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




msg:4381993
 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"

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved