You've got worse problems than z-index stacking. Since you are using a (presumably Java) applet for your rollover effects, they will be unavailable in browsers not supporting Java. And, they must each be clicked to activate in IE and in Opera, making them very unintuitive. If they were flash, you could use the wmode param to make them appear behind the lytebox overlay and images, but with Java, I'm not sure if this will work. They would have to have their applet code scripted using javascript to avoid the 'click to activate' bit, so why not use javascript rollovers to begin with:
Code:
<html>
<head>
<title>Make it Happen Media</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
<style type="text/css">
#cell_menu img {
border:none;
}
</style>
<script type="text/javascript">
(function(){
//Place all onmouseover images in the below array:
var roll_images=[
'images/homebutton2.png',
'images/servicesbutton2.png',
'images/portfoliobutton2.png',
'images/orderbutton2.png',
'images/contactbutton2.png'
];
///////////// Stop Editing /////////////
var p=[];
for (var i = 0; i < roll_images.length; i++){
p[i]=new Image();
p[i].src=roll_images[i];
};
})();
</script>
</head>
<body>
<div align="center">
<table border="0" width="662" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td style="border-right: 1px solid #D2D2D2; border-bottom: 1px solid #D2D2D2" width="140">
<p align="right" style="margin-right: 2px"><b>
<font face="Arial" color="#00AEEF" style="font-size: 28pt">Make</font><font face="Arial" color="#00A650" style="font-size: 28pt">It<br>
</font><font face="Arial" color="#F58437" style="font-size: 28pt">Happen<br>
</font><font face="Arial" color="#004A80" style="font-size: 28pt">
Des</font><font face="Arial" color="#ED125A" style="font-size: 28pt">ign </font></b></td>
<td id="cell_menu" height="133" style="border-bottom: 1px solid #D2D2D2">
<a href="http://www.mihdesign.us.pn">
<img src="images/homebutton1.png" onmouseout="this.src=this.onmouseover.or;" onmouseover="if(!this.onmouseover.or){this.onmouseover.or=this.src};this.src='images/homebutton2.png';"></a>
<a href="/services.htm" target="I1">
<img src="images/servicesbutton1.png" onmouseout="this.src=this.onmouseover.or;" onmouseover="if(!this.onmouseover.or){this.onmouseover.or=this.src};this.src='images/servicesbutton2.png';"></a>
<a href="http://mihmedia.freehostia.com/portfolio.htm" target="I1">
<img src="images/portfoliobutton1.png" onmouseout="this.src=this.onmouseover.or;" onmouseover="if(!this.onmouseover.or){this.onmouseover.or=this.src};this.src='images/portfoliobutton2.png';"></a>
<a href="/order.htm" target="I1">
<img src="images/orderbutton1.png" onmouseout="this.src=this.onmouseover.or;" onmouseover="if(!this.onmouseover.or){this.onmouseover.or=this.src};this.src='images/orderbutton2.png';"></a>
<a href="/contact.htm" target="I1">
<img src="images/contactbutton1.png" onmouseout="this.src=this.onmouseover.or;" onmouseover="if(!this.onmouseover.or){this.onmouseover.or=this.src};this.src='images/contactbutton2.png';"></a>
</td>
</tr>
</div>
</table>
<div align="center">
<div align="center">
<table border="0" width="662" cellspacing="0" cellpadding="0" id="table3" height="603">
<tr>
<td style="border-bottom: 1px solid #D2D2D2" valign="top">
<iframe name="I1" width="450" height="592" src="/news.php" marginwidth="1" marginheight="0" scrolling="no" border="0" frameborder="0">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></td>
<td width="200" style="border-left: 1px solid #D2D2D2; border-bottom: 1px solid #D2D2D2" valign="top">
<p align="center" style="margin-left: 6px; margin-top: 6px">
<b><font face="Arial" color="#004A80">Current </font>
<font face="Arial" color="#ED125A">Projects:</font></b></td>
</tr>
</table>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" id="table4" width="661" height="29">
<tr>
<td style="border-bottom: 1px solid #D2D2D2">
<p align="center"><b><font color="#004A80">|</font></b><font face="Verdana" size="1" color="#00AEEF"><b>
© 2007-2008 </b></font><b>
<font face="Verdana" size="1" color="#ED125A">Make It
Happen Design</font><font color="#004A80"> | </font>
<font face="Verdana" size="1" color="#00A650">
<a style="text-decoration: none" href="http://mihmedia.freehostia.com/news/">
<font color="#00A650">News Login</font></a> </font>
<font color="#004A80">| </font>
<font face="Verdana" size="1" color="#F58437">
<a style="text-decoration: none" target="I1" href="/contact.htm">
<font color="#F58437">Contact</font></a> </font>
<font color="#004A80">|</font></b></td>
</tr>
</table>
</div>
</div>
</div>
<p><br>
</div>
</body>
</html>
Problem with LightBox
Reply With Quote
Originally Posted by sina_t97
Bookmarks