Hi there,
I am trying to create a horizontal list - with a rollover effect so that the individual words are replaced with thumbnail images when the curser is on them. i.e. "home" is replaced by an image of a house etc
I have managed to get hold of the script to make this work, but the images are not showing up in the correct position. Rather they are appearing on top of eachother instead of as a replacement to the appropriate word.
Please help! I think im going a little bit mad!
Thank you in advance...
My code is:
<!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>
<link href='http://fonts.googleapis.com/css?family=Actor|Carme|Lato:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>In Point Productions - Filming & Editing</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #`FFFFFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #FFF;
}
#container {
width: 900px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: none;
padding-top: auto;
font-family: 'lato', sans-serif;
font-style: book300;
}
#header {
background: #FFFFFF;
padding: 30px 10px 0px 0px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
height: 60px;
text-align: right;
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
font-family: 'Lato', sans-serif;
font-style:normal;
font-size:16px;
}
#menu{
width: 100%;
background-color: #FFFFFF;
text-decoration: none;
color: #333;
background-color: #FFFFFF;
color:#333;
}
#menu ul{
margin: 0;
padding: 0;
float: right;
}
#menu ul li{
display: inline;
}
#menu ul li a{
padding: 15px 11px;
}
#menu ul li a:hover, .menu ul li .current{
background-color:#FFFFFF;
}
#style {
position:absolute;
visibility:hidden;
float: right;
display: inline;
}
#style1 {
position:absolute;
visibility:hidden;
float: right;
display: inline;
}
#style2 {
position:absolute;
visibility:hidden;
float: right;
display: inline;
}
#style3 {
position:absolute;
visibility:hidden;
float: right;
display: inline;
}
#style4 {
position:absolute;
visibility:hidden;
float: right;
display: inline;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script language="Javascript">
<!--
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>
</head>
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li><a href="index3.dwt" onMouseOver="ShowPicture('style',1)" onMouseOut="ShowPicture('style',0)">Home</a></li>
<li><a href="#" onMouseOver="ShowPicture('style1',1)" onMouseOut="ShowPicture('style1',0)">Work</a></li>
<li><a href="#" onMouseOver="ShowPicture('style2',1)" onMouseOut="ShowPicture('style2',0)">About</a></li>
<li><a href="#" onMouseOver="ShowPicture('style3',1)" onMouseOut="ShowPicture('style3',0)">Services</a></li>
<li><a href="#" onMouseOver="ShowPicture('style4',1)" onMouseOut="ShowPicture('style4',0)">Contact</a></li>
</ul>
</div>
<div id="menu">
<ul>
<li><div id="style"><img src="images/locked/subheadings/home.png"/></div></li>
<li><div id="style1"><img src="images/locked/subheadings/work.png"/></div></li>
<li><div id="style2"><img src="images/locked/subheadings/about.png"/></div></li>
<li><div id="style3"><img src="images/locked/subheadings/services.png"/></div></li>
<li><div id="style4"><img src="images/locked/subheadings/contact.png"/></div></li>
</ul>
</div>
<!-- end #header --></div>
</body>
</html>
Before you post, read our: 
CSS Rollover text to show an image - help!
