PDA

Click to See Complete Forum and Search --> : rollover links

nguyen.bk
10-31-2006, 05:46 PM
Hello, I have a problem with my rollover links. I was wondering if anyone can help me.

My rollover links appear just fine in Firefox, but IE says that there is an error on the page; therefore, no rollover effect.

I checked the html markup validator and it said that I had a few errors, but I do not know how to go about correcting them.

I will now post my HTML Code, and if anyone can tell me what is wrong, or how I can go about fixing it, I would greatly appreciate it!

Here is the code from my index page...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<TITLE>Nguyenbk Site - Keepin' It Simple</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--


body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: medium;


}
body {
background-color: #b5c8ce;
background-image: url();
background-position:center
background-repeat: no-repeat;
background-repeat: no-repeat;

}
.style14 {font-size: 10px; color: #000000; }
#Layer1 {
position:absolute;
width:167px;
height:410px;
z-index:1;
left: 189px;
top: 375px;

}
#Layer2 {
position:absolute;
width:200px;
height:115px;
z-index:1;

}
#Layer3 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 282px;
top: 413px;

}
.style23 {color: #FFFFFF}
.style24 {color: #A0FE84}
.style25 {font-size: 12px}
.style26 {font-size: 14px}
.style28 {color: #A0FE84; font-weight: bold; }
.style29 {font-size: 18px}
#Layer4 {
position:absolute;
width:200px;
height:30px;
z-index:1;
left: 232px;
top: 232px;
}
.style30 {color: #B5C8CE}
</style>
<script type="text/JavaScript">
<!--
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>

</style></head>

<body onLoad="MM_preloadImages('home_over.gif','aboutme_over.gif','poetry_over.gif','hiphop_over.gif','feedback_ov er.gif','contact_over.gif')">
<div class="style29" id="Layer4">
<div align="center" class="style30">HOME</div>
</div>
<p>&nbsp;</p>

<p>&nbsp;</p>
<table width="793" height="602" border="1" align="center">
<tr>
<td width="783" height="596" colspan="3" bgcolor="#FFFFFF"><table width="750" height="586" border="1" align="center" bordercolor="#ECE9D8">
<tr>
<td height="156" colspan="7"><img src="banner.jpg" width="773" height="175" border="0" usemap="#Map"></td>
</tr>
<tr>

<td width="112" height="30" bgcolor="#FFFFFF"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','home_over.gif',1)"><img src="home_up.gif" alt="Home" name="Home" width="108" height="28" border="0" id="Home" /></a></td>
<td width="112" bgcolor="#FFFFFF"><a href="aboutme.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Me','','aboutme_over.gif',1)"><img src="aboutme_up.gif" alt="About Me" name="About Me" width="108" height="28" border="0"id="About Me" /></a></td>

<td width="112" bgcolor="#FFFFFF"><a href="poetry.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Poetry','','poetry_over.gif',1)"><img src="poetry_up.gif" alt="Poetry" name="Poetry" width="108" height="28" border="0" id="Poetry" /></a></td>
<td width="112" bgcolor="#FFFFFF"><a href="hiphop.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Hip-Hop','','hiphop_over.gif',1)"><img src="hiphop_up.gif" alt="Hip-Hop" name="Hip-Hop" width="108" height="28" border="0"id="Hip-Hop" /></a></td>
<td width="112" bgcolor="#FFFFFF"><a href="feedback.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Feedback','','feedback_over.gif',1)"><img src="feedback_up.gif" alt="Feedback" name="Feedback" width="108" height="28" border="0"id="Feedback" /></a></td>
<td width="60" bgcolor="#FFFFFF">&nbsp;</td>
<td width="117" bgcolor="#FFFFFF"><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','contact_over.gif',1)"><img src="contact_up.gif" alt="Contact" name="Contact" width="108" height="28" border="0"id="Contact" /></a></td>
</tr>
<tr bordercolor="#B5C8CE" bgcolor="#B5C8CE">
<td height="371" colspan="7" valign="bottom" bordercolor="#B5C8CE"><table width="746" height="302" border="0">
<tr>
<td width="254" height="20" valign="top"><span class="style25">Take-Home Quiz </span></td>
<td colspan="2" rowspan="4">&nbsp;</td>
<td width="463">&nbsp;</td>
<td width="10" rowspan="4">&nbsp;</td>
</tr>
<tr>
<td rowspan="2" align="center" valign="bottom"><a href="http://www.dontclick.it/" target="_blank"><img src="don'tclickit.jpg" alt="Don't Click It" width="132" height="99" border="1" longdesc="http://www.dontclick.it/" /></a></td>
<td height="23"><div align="center" class="style29">MISSION STATEMENT </div></td>
</tr>
<tr>
<td height="95" valign="top"><p align="center" class="style25"><img src="divider.gif" alt="divider" width="463" height="9" align="middle" /></p> <p align="center" class="style25">It is with pleasure to present to you my creation for CIS55. I hope you learn a little more about me and my interests. Enjoy your stay and visit often! </p>
<p align="center" class="style25"><img src="divider.gif" alt="divider" width="430" height="7" /></p></td>
</tr>

<tr>
<td height="154" align="center" valign="top"><p class="style23">Site of the Week</p>
<p class="style26"><span class="style28">Don't Click It</span></p>
<p class="style26"><span class="style25">This site comes with unique navigation and some pretty slick flash tweens. Worth clicking around a bit, despite the site's warning. </span></p>
<p class="style26">&nbsp;</p></td>
<td valign="middle"><div align="center"><img src="owl.gif" alt="Temple Owl" width="168" height="121" /></div></td>
</tr>
</table>
<p align="center" class="style14"><a href="index.html" class="style24">Home</a><span class="style23"> | </span><a href="aboutme.html" class="style24">About Me</a><span class="style23"> | </span><a href="poetry.html" class="style24">Poetry</a><span class="style23"> | </span><a href="hiphop.html" class="style24">Hip-Hop</a><span class="style23"> | </span><a href="feedback.html" class="style24">Feedback</a></p>

<p align="center" class="style14"><a href="mailto:nguyen.bk@temple.edu" class="style23">Contact </a></p></td>
</tr>


</table></td>
</tr>
</table>
<p>&nbsp;</p>

<map name="Map"><area shape="rect" coords="11,11,236,107" href="index.html" alt="Nguyenbk Site">
</map></body>
</html>
Centauri
10-31-2006, 07:32 PM
You have an extra closing style tag at the end of the head section - this may be what it is complaining about.

Also, with a few changes to the CSS, ALL of that javascript can be made redundant....

Cheers
Graeme
nguyen.bk
10-31-2006, 08:05 PM
yeah, i was aware of that. when i deleted the unneeded style tag, my page will not even appear in IE.

hmm...i don't really know how to fix this issue. i don't get why it's working just fine in FF, but not in IE.
Centauri
10-31-2006, 10:31 PM
You missed a //--> tag before the closing style tag in your header - that gets it displaying in IE.

Cheers
Graeme
nguyen.bk
11-01-2006, 10:42 PM
man, you're amazing!

thanks so much.

looks like i will be here, for i can learn a lot here.