Hi,

I'm trying to have it when you mouseover a link the image next to the links will changes. I have it working for the most part in Firefox/Mozilla. In Safari there is an alignment issue and in IE the image won't change back when you mouseout. Thank for the help.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NOAA's Coral Reef Information System</title>
<style>
body {margin: 0; padding: 0; background: #F8F6EA; font-size:10pt; font-family:Verdana, Arial, Helvetica, sans-serif;}
#container { width: 720px; margin: 0px; text-align:left;}
#left {float:left; border-right:1px solid #F27F4D; width:535px; padding:5px;}
#right {float:left; width:155px; border-left:1px solid #F27F4D; margin-left:-1px;/* makes border line up with #left border */ padding-left:5px; font-size:9pt;}
#right li { margin-left:-30px; padding:0 0 10px 9px; background: url(siteart/homearrow.gif) top left no-repeat; list-style-type: none;}
#right a {font-weight:bold;}
#intro {font-style:italic;}
#mainnav {width:535px; height:400px;}
#mainnav img{margin: 0; padding: 5px 5px 5px 0; border-right:1px solid #F27F4D; border-top:1px solid #F27F4D; border-bottom:1px solid #F27F4D; float:left;}
#mainnav ul {list-style: none; width:450px;}
* html #mainnav ul {width:350px;/*for IE*/}
#mainnav ul li {position: relative;}
#mainnav ul li a {display: block; text-decoration: none; padding: 20px 10px 0 10px; font-size:14pt; font-weight:bold; font-family:Helvetica, Verdana, Arial, sans-serif;}
* html #mainnav ul li a {padding: 0 10px 0 10px; /*for IE*/}
#mainnav ul li a:hover {border-bottom:1px solid #F27F4D;}

#mainnav ul li a:link img{display:none;}
#mainnav ul li a:visited img{display:none;}
#mainnav ul li a:hover img {position: absolute; top: 2px; left: -153px; height: 342px; width: 147px; display:block; border:0;}
#mainnav ul li a:hover .reef {top: -38px;}
#mainnav ul li a:hover .pro {top: -74px;}
#mainnav ul li a:hover .lib {top: -114px;}
#mainnav ul li a:hover .act {top: -151px;}
#mainnav ul li a:hover .gloss {top: -189px;}
* html #mainnav ul li a:hover img {left: -162px;/*for IE*/}

#textnav {font-size:8pt; text-align:center; width:495px;}
a:link {color: #333366;}
a:visited {color: #333366;}
a:hover {color: #006699;}
h2{color: #336; font-weight: bold; font-size: 10pt;}
</style>
</head>

<body>
<div id="container">
<div><!--#include virtual="includes/coris_homebanner.ssi" --></div>

<div id="left">
<div id="intro">
<p>NOAA's Coral Reef Information System (CoRIS) is designed to be a single
point of access to NOAA coral reef information and data products, especially
those derived from NOAA's Coral Reef Conservation Program.</p>
<p>&nbsp;</p>
</div>
<div id="mainnav">
<img name="test_r2_c2" src="images/test_r2_c2.gif" width="147" height="342" border="0" alt="Coral">
<ul>
<li><a href="#">DISCOVER NOAA's DATA<img src="images/test_r2_c2_f6.gif"></a></li>
<li><a href="#">ABOUT CORAL REEFS<img src="images/test2_r2_c2_f2.gif" class="reef"></a></li>
<li><a href="#">PROFESSIONAL EXCHANGES<img src="images/test2_r2_c2_f5.gif" class="pro"></a></li>
<li><a href="#">THE LIBRARY<img src="images/test2_r2_c2_f3.gif" class="lib"></a></li>
<li><a href="#">NOAA's CORAL REEF ACTIVITIES<img src="images/test2_r2_c2_f4.gif" class="act"></a></li>
<li><a href="#">GLOSSARY<img src="images/test2_r2_c2_f7.gif" class="gloss"></a></li>
</ul>
</div>
<div id="textnav">
<hr width="25%">
<p><br>
<a href="backmatter/siteinfo.html">About This Site</a> | <a href="backmatter/toc.html">Table of Contents</a> | <a href="backmatter/supportingdocs.html">Supporting Documents</a> | <a href="backmatter/contactus.html">Contact Us</a><br>
<a href="backmatter/acknowledge.html">Acknowledgements</a> | <a href="backmatter/disclaimer.html">Disclaimer</a> | <a href="backmatter/privacy.html">Privacy Policy</a><a href="backmatter/privacy.html"></a>
</p>
<p>&nbsp; </p>
</div>
</div>
<div id="right">
<h2 align="center">Special Note</h2>
<ul>
<li>Learn about the activities of the <a href="http://coralreef.gov" target="_blank">U.S.
Coral Reef Task Force</a>.</li>
<li>View the <a href="activities/actionstrategy/actionstrategy.html">National
Coral Reef Action Strategy</a>.</li>
<li>Read the report on the <a href="http://www.nccos.noaa.gov/publications/notables.html#corals" target="_blank">State
of U.S. Coral Reefs</a>.</li>
<li>Read the report on the Status of Coral Reefs of the World.</li>
<li>Go to <a href="exchanges/welcome.html">Professional exchanges</a> for expert discussion on<a href="exchanges/coralgenome/coralgenome.html"> DNA
sequencing in corals</a>.</li>
<li>View the updated <a href="data/taxonomy5_1_04.html">Taxonomy</a> file of over 3000 scientific names found in NOAA coral data.</li>
<li>Search by taxonomic name--a new search feature in the <a href="http://coris.noaa.gov/text-search/search.jsp" target="_blank">Text
Search</a>--in <a href="data/">Discover NOAA's Data</a>.</li>
<li>Browse the Library for NOAA coral reef <a href="library/publications.html">publications</a> and <a href="noaaoffices/noaaoffices.html">Web
sites</a>.</li>
<li>Take the <a href="backmatter/usersurvey.html">User Survey</a>.</li>
</li>
</ul>
<p><!--#include virtual="/includes/corisearch_home.html"--></p>

</div>
<div style="clear:both"></div>
<div>
<!--#include virtual="/includes/corisfoot.html"-->
</div>
</div>
</body>
</html>