Rollover in 2nd column

  • Thread starter Thread starter Iain Wilson
  • Start date Start date
I

Iain Wilson

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 &amp;
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;
}
 
Hi All

I have managed to find a solution :-)

I will now pat myself on the back and go lie down.
All that effort has drained me

Thanks anyway

Iain
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Style Sheet not getting applied to content page 8
CSS problem in Firefox 4
CSS menu 1
using CSS to center text 4
The elusive hover and <p> 2
some questions. 1
Highlighting he current page 3
CSS Problems 8

Back
Top