Hi all
I have a simple 2 column page (see below) styled by CSS (found the CSS style
sheet in a book I bought)
In column 1 there are a list of href's.
What I want to do is to have an image or some text (or both) 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="http://www.yahoo.co.uk";>Yahoo - UK</a>
</li>
<li>
<a href="http://www.yahoo.com";>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;
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
