homepage Welcome to WebmasterWorld Guest from 54.226.21.57
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Question about hovering over a link.
matthayzon89



 
Msg#: 4369793 posted 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

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



 
Msg#: 4369793 posted 8:39 pm on Oct 2, 2011 (gmt 0)

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

rocknbil

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



 
Msg#: 4369793 posted 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#: 4369793 posted 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

5+ Year Member



 
Msg#: 4369793 posted 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

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



 
Msg#: 4369793 posted 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#: 4369793 posted 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