PDA

View Full Version : Rollover images not working after validation - HELP!



TFOH
Jul 22nd, 2010, 05:33 PM
Yo guys!

last time i had an issue it got cleared up in like 2 hours by you legends and i'm hoping the same will happen again :)

Basically I cleaned up all my CSS and HTML using the validation service and everything is working fine except the rollover images aren't working as they did. They should change on hover but they dont, I had it working fine before validation. Anyone got any ideas?




<!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 name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oliver Miller Carpentry - Sheffield Carpentry &amp; Joinery - Domestic Commercial At Home Local Carpenter Joiner S11 S10 S7 S1 Derbyshire South Yorkshire Reliable Trustworthy Well Mannered Professional</title>

<script type="text/javascript">
//<![CDATA[
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
//]]>
</script>
<link href="CSS/mainstyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
<!--

-->
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
body {
background-color: #FFFFFF;
}
div.c1 {text-align: center}
/*]]>*/
</style>
</head>
<body onload="MM_preloadImages('images/rollovers/about_o.gif','images/rollovers/projects_o.gif','images/rollovers/contact_o.gif')">
<!-- ImageReady Slices (OMC_Index_noBG.psd) -->
<div id="container">
<div id="bgleft"></div>
<div id="bgright"></div>
<div id="header"><img src="images/header.gif" width="1000" height="150" alt="" /></div>
<!-- End header -->
<div id="tab1"><img src="images/rollovers/home_d.gif" width="250" height="50" alt="home" /></div>
<div id="tab2"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about tab','','images/rollovers/about_o.gif',1)"><img src="images/rollovers/about_u.gif" alt="abouttab" name="abouttab" width="250" height="50" border="0" /></a></div>
<div id="tab3"><a href="projects.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projects tab','','images/rollovers/projects_o.gif',1)"><img src="images/rollovers/projects_u.gif" alt="projectstab" name="projectstab" width="250" height="50" border="0" /></a></div>
<div id="tab4"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact tab','','images/rollovers/contact_o.gif',1)"><img src="images/rollovers/contact_u.gif" alt="contacttab" name="contacttab" width="250" height="50" border="0" /></a></div>
<!-- End tabs -->
<div id="banner"><img src="images/banner_all.gif" width="1000" height="240" alt="banner" /></div>
<!-- End banner -->
<div id="mainindex">
<div id="mainoli1"><img src="images/oli1.gif" width="111" height="314" alt="" /></div>
<div id="mainoli2"><img src="images/oli2.gif" width="110" height="314" alt="" /></div>
<div id="mainoli3"><img src="images/oli3.gif" width="37" height="314" alt="" /></div>
<div id="mainoli4"><img src="images/oli4.gif" width="65" height="314" alt="" /></div>
<div id="mainoli5"><img src="images/oli5.gif" width="9" height="314" alt="" /></div>
<div id="maintext01"><img src="images/Index_12.gif" width="210" height="7" alt="" /></div>
<div id="maintext02"><img src="images/Index_13.gif" width="28" height="31" alt="" /></div>
<div id="maintext03"><img src="images/Index_14.gif" width="430" height="314" alt="" /></div>
<div id="maintext04"><img src="images/Index_15.gif" width="210" height="15" alt="" /></div>
<div id="maintext05"><img src="images/Index_16.gif" width="210" height="9" alt="" /></div>
<div id="maintext06">
<p class="main">"Hi I'm Oliver Miller, a carpenter and joiner based<br />
in Sheffield. For a free no obligation quote please just give me a call. I have been working in the industry for over 5 years building commercial and residential properties, so why not see how I can help you improve your home or office."</p>
</div>
<div id="maintext07"><img src="images/Index_18.gif" width="10" height="251" alt="" /></div>
<div id="maintext08"><img src="images/Index_19.gif" width="18" height="251" alt="" /></div>
<div id="maintext09"><img src="images/Index_20.gif" width="210" height="9" alt="" /></div>
<div id="maintext10"><img src="images/Index_21.gif" width="28" height="32" alt="" /></div>
<div id="maintext11"><img src="images/Index_22.gif" width="210" height="16" alt="" /></div>
<div id="maintext12"><img src="images/Index_23.gif" width="210" height="7" alt="" /></div>
</div>
<!-- End MainIndex -->
<div id="footer"><a href="http://www.thefutureofhistory.co.uk"><img src="images/footer.gif" width="1000" height="26" alt="footer" /></a>
<div class="c1" id="footertext"><span class="footer">Copyright TheFutureOfHistory 2010</span></div>
</div>
<!-- End footer --></div>
<!-- End container -->
<!-- End ImageReady Slices -->
</body>
</html>



Here is the CSS



#container {
width : 1000px;
margin-top : 0;
margin-right : auto;
margin-bottom : 0;
margin-left : auto;
height : 777px;
position : relative;
background-color : #cccccc;
}
#bgleft {
position : absolute;
width : 20px;
height : 806px;
left : -20px;
top : 0;
background-color : #666666;
background-image : url(../images/images/BGleft.gif);
}
#bgright {
position : absolute;
width : 21px;
height : 806px;
left : 1000px;
top : 0;
background-color : #666666;
background-image : url(../images/images/BGright.gif);
}
#header {
position : absolute;
width : 1000px;
height : 150px;
left : 0;
top : 0;
}
#tab1 {
position : absolute;
width : 250px;
height : 50px;
left : 0;
top : 150px;
}
#tab2 {
position : absolute;
width : 250px;
height : 50px;
left : 250px;
top : 150px;
}
#tab3 {
position : absolute;
width : 250px;
height : 50px;
left : 500px;
top : 150px;
}
#tab4 {
position : absolute;
width : 250px;
height : 50px;
left : 750px;
top : 150px;
}
#banner {
position : absolute;
width : 1000px;
height : 240px;
left : 0;
top : 200px;
}
#mainindex {
position : absolute;
width : 1000px;
height : 314px;
left : 0;
top : 440px;
}
#mainoli1 {
position : absolute;
width : 111px;
height : 314px;
left : 0;
top : 0;
}
#mainoli2 {
position : absolute;
width : 110px;
height : 314px;
left : 111px;
top : 0;
}
#mainoli3 {
position : absolute;
width : 37px;
height : 314px;
left : 221px;
top : 0;
}
#mainoli4 {
position : absolute;
width : 65px;
height : 314px;
left : 258px;
top : 0;
}
#mainoli5 {
position : absolute;
width : 9px;
height : 314px;
left : 323px;
top : 0;
}
#maintext01 {
position : absolute;
width : 210px;
height : 7px;
left : 332px;
top : 0;
}
#maintext02 {
position : absolute;
width : 28px;
height : 31px;
left : 542px;
top : 0;
}
#maintext03 {
position : absolute;
width : 430px;
height : 314px;
left : 570px;
top : 0;
}
#maintext04 {
position : absolute;
width : 210px;
height : 15px;
left : 332px;
top : 7px;
}
#maintext05 {
position : absolute;
width : 210px;
height : 9px;
left : 332px;
top : 22px;
}
#maintext06 {
position : absolute;
width : 210px;
height : 251px;
left : 332px;
top : 31px;
background-color : #3366cc;
padding-left : 5px;
padding-top : 12px;
}
#maintext07 {
position : absolute;
width : 18px;
height : 251px;
left : 542px;
top : 31px;
}
#maintext08 {
position : absolute;
width : 210px;
height : 251px;
left : 552px;
top : 31px;
}
#maintext09 {
position : absolute;
width : 210px;
height : 9px;
left : 332px;
top : 282px;
}
#maintext10 {
position : absolute;
width : 210px;
height : 32px;
left : 542px;
top : 282px;
}
#maintext11 {
position : absolute;
width : 210px;
height : 16px;
left : 332px;
top : 291px;
}
#maintext12 {
position : absolute;
width : 210px;
height : 7px;
left : 332px;
top : 307px;
}
#aboutbox01 {
position : absolute;
width : 316px;
height : 294px;
left : 7px;
top : 7px;
background-color : #ffffff;
}
#aboutbox02 {
position : absolute;
width : 317px;
height : 294px;
left : 341px;
top : 7px;
background-color : #ffffff;
}
#aboutbox03 {
position : absolute;
width : 316px;
height : 294px;
left : 676px;
top : 7px;
background-color : #ffffff;
}
#aboutinner01 {
position : absolute;
width : 302px;
height : 180px;
left : 7px;
top : 107px;
background-color : #3366cc;
}
#aboutinner02 {
position : absolute;
width : 303px;
height : 180px;
left : 7px;
top : 107px;
background-color : #3366cc;
}
#aboutinner03 {
position : absolute;
width : 302px;
height : 180px;
left : 7px;
top : 107px;
background-color : #3366cc;
}
#abouttext01 {
position : absolute;
width : 288px;
height : 166px;
left : 7px;
top : 7px;
background-color : #3366cc;
}
#abouttext02 {
position : absolute;
width : 288px;
height : 166px;
left : 7px;
top : 7px;
background-color : #3366cc;
}
#abouttext03 {
position : absolute;
width : 288px;
height : 166px;
left : 7px;
top : 7px;
background-color : #3366cc;
}
#contactbox01 {
position : absolute;
width : 316px;
height : 214px;
left : 7px;
top : 7px;
background-color : #ffffff;
}
#contactbox02 {
position : absolute;
width : 317px;
height : 214px;
left : 341px;
top : 7px;
background-color : #ffffff;
}
#contactbox03 {
position : absolute;
width : 316px;
height : 214px;
left : 676px;
top : 7px;
background-color : #ffffff;
}
#contactbox04 {
position : absolute;
width : 986px;
height : 97px;
left : 7px;
top : 230px;
background-color : #ffffff;
}
#contactinner01 {
position : absolute;
width : 302px;
height : 100px;
left : 7px;
top : 107px;
background-color : #3366cc;
}
#contactinner02 {
position : absolute;
width : 303px;
height : 100px;
left : 7px;
top : 107px;
background-color : #3366cc;
}
#contactinner03 {
position : absolute;
width : 302px;
height : 100px;
left : 7px;
top : 107px;
background-color : #3366cc;
}
#contactinner04 {
position : absolute;
width : 970px;
height : 62px;
left : 7px;
top : 27px;
background-color : #3366cc;
}
#contacttext01 {
position : absolute;
width : 288px;
height : 86px;
left : 7px;
top : 7px;
background-color : #3366cc;
}
#contacttext02 {
position : absolute;
width : 288px;
height : 86px;
left : 7px;
top : 7px;
background-color : #3366cc;
}
#contacttext03 {
position : absolute;
width : 288px;
height : 86px;
left : 7px;
top : 7px;
background-color : #3366cc;
}
#contacttext04 {
position : absolute;
width : 950px;
height : 52px;
left : 7px;
top : 7px;
background-color : #3366cc;
}
#footer {
position : absolute;
width : 1000px;
height : 26px;
left : 0;
top : 780px;
}
#footertext {
position : absolute;
left : 220px;
top : 8px;
width : 540px;
height : 17px;
}
.main {
font-family : Arial, Helvetica, sans-serif;
color : #ffffff;
font-size : 16px;
font-weight : normal;
}
.footer {
font-family : Arial, Helvetica, sans-serif;
color : #ffffff;
font-size : 13px;
line-height : 90%;
}
.heading1 {
font-family : Arial, Helvetica, sans-serif;
color : #000000;
font-size : 30px;
font-weight : bold;
letter-spacing : -2px;
line-height : 92%;
}
.bodytext2 {
font-family : Arial, Helvetica, sans-serif;
color : #000000;
font-size : 14px;
font-weight : normal;
}
a.contactlink {
font-family : Arial, Helvetica, sans-serif;
color : #ffffff;
font-size : 16px;
line-height : 20px;
text-decoration : none;
line-height : 92%;
}
a:hover.contactlink {
color : #ffffff;
font-size : 16px;
text-decoration : underline;
}


Thanks again!:)

ahayzen
Jul 22nd, 2010, 05:54 PM
Hi



<div id="tab4">
<a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact tab','','images/rollovers/contact_o.gif',1)">
<img src="images/rollovers/contact_u.gif" alt="contacttab" name="contacttab" width="250" height="50" border="0" />
</a>
</div>


One has a space the other doesn't? I think this is your problem.

So change MM_swapImage('contact tab','','images/rollovers/contact_o.gif',1) to MM_swapImage('contacttab','','images/rollovers/contact_o.gif',1)

Andy

TFOH
Jul 22nd, 2010, 06:26 PM
Ok That officially took less then an hour! Speedy work my friend, speedy work:)

I should have seen that TBH but thanks for pointing it out Andy. I have now finished the site :thumbsup: