Home
Forums
New posts
Search forums
Articles
Latest reviews
Search resources
Members
Current visitors
Newsgroups
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Menu
Log in
Register
Install the app
Install
Home
Forums
Newsgroups
Microsoft DotNet
Microsoft ASP .NET
Rollover in 2nd column
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
[QUOTE="Iain Wilson, post: 11981300"] Hi all I have a simple 2 column page (see below) styled by CSS In column 1 there are a list of href's. What I want to do is to have an image displayed in column 2 in response to a href mouseover in column 1. Is this possible and if so can anyone give me some idea of how. See the code and CSS below. Many thanks in advance for any help offered. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>2 Column Rollover Example - </title> <link rel="stylesheet" type="text/css" href="2col.css" /> </head> <body> <div id="header"> <img src="Image1.gif" width="187" height="50" alt="Stage & Screen" class="logo" /> <span class="strapline">2 Column Rollover Example </span> </div> <div id="content"> <h2>Welcome to Customer Services. </h2> </div> <div id="nav"> <ul> <li> <a href="[URL]http://www.yahoo.co.uk[/URL]">Yahoo - UK</a> </li> <li> <a href="[URL]http://www.yahoo.com[/URL]">Yahoo - International</a> </li> </ul> </div> </html> ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ CSS document ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ body { margin: 0; padding: 0; background-color: #FFFFFF; color: #000000; font-family: Arial, Helvetica, sans-serif; border-top: 2px solid #2A4F6F; } #header { border-top: 1px solid #778899; border-bottom: 1px dotted #B2BCC6; height: 3em; } #header .strapline { font: 120% Georgia, "Times New Roman", Times, serif; color: #778899; background-color: transparent; float: right; margin-right: 2em; margin-top: 0.5em; } #header .logo { float: left; margin-left: 1.5em; margin-top: 0.5em; } #nav { position: absolute; top: 5em; left: 1em; width: 14em; } #nav ul { list-style: none; margin-left: 1em; padding-left: 0; } #nav li { font-size: 80%; border-bottom: 1px dotted #B2BCC6; margin-bottom: 0.3em; } #nav a:link, #nav a:visited { text-decoration: none; color: #2A4F6F; background-color: transparent; } #nav a:hover { color: #778899; } #nav h2 { font: 110% Georgia, "Times New Roman", Times, serif; color: #2A4F6F; background-color: transparent; border-bottom: 1px dotted #cccccc; } #content { margin-left: 16em; margin-right: 2em; text-align: center; } h1 { font: 150% Georgia, "Times New Roman", Times, serif; } #content p { font-size: 80%; line-height: 1.6em; padding-left: 1.2em; } [/QUOTE]
Verification
Post reply
Home
Forums
Newsgroups
Microsoft DotNet
Microsoft ASP .NET
Rollover in 2nd column
Top