Check this page for reference.
http://www.marco.com.cn/web-content/marco_re10.html
--------------------------------------------------------------
Expand|Select|Wrap|Line Numbers
- <head>
- <!-- InstanceBeginEditable name="doctitle" -->
- <title>Marco</title>
- <!-- InstanceEndEditable -->
- <!-- InstanceBeginEditable name="head" -->
- <link href="../../web-content-Backup/extra.css" rel="stylesheet" type="text/css">
- <!-- InstanceEndEditable -->
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
- <script type="text/javascript" src="js/marco.js"></script>
- <link href="extra.css" rel="stylesheet" type="text/css"/>
- <link rel="stylesheet" type="text/css" href="marco.css"/>
- <script type="text/javascript">
- <!--
- function openMenu(a){
- var td = $(a).parents("td")[0];
- var menus = ["menu1", "menu2", "menu3", "menu4", "menu5", "menu6", "menu7", "menu8"];
- var myName = $(td).id();
- for(var i=0;i<menus.length;i++)
- if(menus[i] != myName)
- hideMenu($("#" + menus[i]));
- toggleMenu(td);
- }
- // -->
- </script></head>
But if i include another set of java scripts for image popup My right side menu is not displaying.
Here is my full page code including image popup javascript(lightbox.js).
[HTML]<html><!-- InstanceBegin template="Templates/MainTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Marco</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<link href="../../web-content-Backup/extra.css" rel="stylesheet" type="text/css">
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="js/marco.js"></script>
<link href="extra.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="marco.css"/>
<script type="text/javascript">
<!--
function openMenu(a){
var td = $(a).parents("td")[0];
var menus = ["menu1", "menu2", "menu3", "menu4", "menu5", "menu6", "menu7", "menu8"];
var myName = $(td).id();
for(var i=0;i<menus.length;i++)
if(menus[i] != myName)
hideMenu($("#" + menus[i]));
toggleMenu(td);
}
// -->
</script>
<link rel="stylesheet" href="backbox.css" type="text/css" />
<script type="text/javascript" src="js/prototype.compressed.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/dhtmlHistory.js"></script>
<script type="text/javascript" src="js/customsignsheader.js"></script>
</head>
<body>
<div align="center"><IMG height=70 alt="" src="images/Home_01.jpg" width=800></div><table align="center" cellpadding="0" cellspacing="0" border="0" width="800" style="BACKGROUND-COLOR: white">
<tr>
<td><A onmouseover="changeImages('home','images/home-on.gif');return true" onmouseout="changeImages('home','images/home.gif');return true" href="index.html"><IMG id=home height=24 alt="" src="images/home.gif" width=53 border=0 name=home></a><IMG height=23 alt="" src="../../web-content-Backup/images/split.gif" width=8 border=0><A onmouseover="changeImages('news','images/news-on.gif');return true" onmouseout="changeImages('news','images/news.gif');return true" href="News.html"><IMG id=news height=24 alt="" src="../../web-content-Backup/images/news.gif" width=53 border=0 name=news></a><IMG height=23 alt="" src="../../web-content-Backup/images/split.gif" width=8 border=0><!--<a onmouseover="changeImages('products','images/products-on.gif');return true" onmouseout="changeImages('products','images/products.gif');return true" href="Products.html"><img id="products" src="images/products.gif" alt="" name="products" border="0" height="24" width="91"></a><img src="images/split.gif" alt="" border="0" height="23" width="8">--><A onmouseover="changeImages('company','images/company-on.gif');return true" onmouseout="changeImages('company','images/company.gif');return true" href="Company.html"><IMG id=company height=24 alt="" src="../../web-content-Backup/images/company.gif" width=83 border=0 name=company></a><IMG height=23 alt="" src="../../web-content-Backup/images/split.gif" width=8 border=0><A onmouseover="changeImages('careers','images/careers-on.gif');return true" onmouseout="changeImages('careers','images/careers.gif');return true" href="Careers.html"><IMG id=careers height=24 alt="" src="../../web-content-Backup/images/careers.gif" width=79 border=0 name=careers></a><IMG height=23 alt="" src="../../web-content-Backup/images/split.gif" width=8 border=0><A onmouseover="changeImages('contact','images/contact-on.gif');return true" onmouseout="changeImages('contact','images/contact.gif');return true" href="Contact.html"><IMG id=contact height=24 alt="" src="../../web-content-Backup/images/contact.gif" width=81 border=0 name=contact></a></td></tr></table>
<table id="mainbar" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="15"></td>
<td width="621" style="PADDING-LEFT: 0px; VERTICAL-ALIGN: top; PADDING-TOP: 0px; BACKGROUND-COLOR: white"><!-- InstanceBeginEditable name="Content" -->
<IMG height=133 alt=Griprite src="images/renoirwebpicture.jpg" width=623><br>
<div class="text">
<p> <img border="0" src="images/renoirwebpic1.JPG" width="83" height="30"> <span class="text"><font size="1"><b>fine
art</b></font> </span><font face="MyriadPro-Regular" color="#8d8d8d" size="1">is
a beautifully designed range of high quality products for drawing,
sketching and</font> <font face="Myriad-Roman" color="#8d8d8d" size="1">hobby
purposes. The range is used by artists, designers and illustrators as
well as for hobby purposes. The range meets all the high
requirements one would expect from pencils designed for
professionals, such as subtle sense of color, good color transfer</font>
<font face="Myriad-Roman" color="#8d8d8d" size="1">and fine color
texture. With excellent mixing qualities and a very well coordinated
range of colors and degrees of hardness, they provide even more
possibilities to express oneself.</font></p>
<p> </p>
<p> </p>
</div>
<table width="616">
<tbody>
<tr>
<td width="608"><img border="0" src="images/graphitesingle.jpg" width="606" height="83"></td>
</tr>
<tr>
<td width="608">
<table width="607">
<tbody>
<tr>
<td width="361">
<img border="0" src="images/12%20graph%2002.jpg" width="250" height="321">
<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/12%20graph%2001.jpg" rel="lightbox[slide]" caption="RenoirGraphite">
<img src="images/3%20graphite.jpg" alt="lime" width="346" height="132" border="0" /></a>
</div>
<a href="images/12%20graph%2002.jpg" rel="lightbox[slide]" caption="RenoirGraphite"></a>
<a href="images/big%20graphite%201.jpg" rel="lightbox[slide]" caption="RenoirGraphite"></a>
</td>
<td width="232" style="VERTICAL-ALIGN: top"><span class="text">
Detail :
</span>
<p><span class="text">
2H-8B Artist Graphite<br>
Round Cedar-lite Wood<br>
Dipped w/Band<br>
Sharpened<br>
Fine Art Box or Individual grade 6x2 Cardboard Box<br>
<br>
Item numbers :<br>
</span>
</p>
<p> </p>
<p> </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
[/HTML]
[HTML] <table>
<tbody>
<tr>
<td><img border="0" src="images/aquarellesingle.jpg" width="609" height="92"></td>
</tr>
<tr>
<td>
<table width="604">
<tbody>
<tr>
<td width="348">
</td>
<td style="VERTICAL-ALIGN: top" width="242"><span class="text">Detail
:
</span>
<p><span class="text">Available in 12/24/48 Colors<br>
3.7mm Fine Art Aquarelle Color lead<br>
Round Cedar-lite Wood<br>
Dipped w/Band<br>
Sharpened<br>
Fine Art Box or Individual color 6x2
Cardboard Box<br>
<br>
Item numbers : <br>
</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p>
<a href="images/24%20Aqua%2002.jpg" rel="lightbox[slide]" caption="RenoirAquarelle-24">
<img src="images/5-aqua.jpg" alt="lime" width="577" height="134" border="0" /></a>
<p><IMG alt="" src="images/24%20Aqua%2001.jpg" width="250" height="320"></p>
<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
</div>
<a href="images/big%20aqua%201.jpg" rel="lightbox[slide]" caption="RenoirAquarelle"></a>
<a href="images/big%20aqua%2012%2002.jpg" rel="lightbox[slide]" caption="RenoirAquarelle-12"></a>
<a href="images/big%20aqua%2024%2001.jpg" rel="lightbox[slide]" caption="RenoirAquarelle-24"></a>
<a href="images/big%20aq%2048%2003.jpg" rel="lightbox[slide]" caption="RenoirAquarelle-48"></a>
<a href="images/big%20aq%2003.jpg" rel="lightbox[slide]" caption="RenoirAquarelle-48"></a>
<table>
<tbody>
<tr>
<td><img border="0" src="images/coloursingle.jpg" width="613" height="71"></td>
</tr>
<tr>
<td>
<table width="613" cellspacing="1">
<tbody>
<tr>
<td width="320">
<p><img border="0" src="images/big%20color%2024%2003.jpg" width="350" height="372"></p>
<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/big%20color%2024%2002.jpg" rel="lightbox[slide]" caption="RenoirColor-24">
<img src="images/big%20color%2024%2002.jpg" alt="lime" width="95" height="93" border="0" /></a>
</div>
<a href="big%20color%2024%2003" rel="lightbox[slide]" caption="RenoirColor"></a>
</td>
<td style="VERTICAL-ALIGN: top" width="279">
<p style="line-height: 100%"><span class="text">Detail
:
</span></p>
<p style="line-height: 100%"><span class="text">Available in 12/24/48 Colors<br>
3.7mm Fine Art Color lead<br>
Round Cedar-lite Wood<br>
Dipped w/Band<br>
Sharpened<br>
Fine Art Box or Individual color 6x2
Cardboard Box<br>
<br>
Item numbers :<br>
</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- InstanceEndEditable --></td>
<td width="14">
<td width="138" style="VERTICAL-ALIGN: top"><table id="menubar" border="0" cellpadding="0" cellspacing="0" style="BACKGROUND-COLOR: #2a2b7a">
<tr>
<td><IMG height=36 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
</tr>
<tr>
<td id="menu1" onmouseover="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -60px; WIDTH: 60px"><A href="Colorite.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_04.gif" width=46></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_03.gif" width=138></td>
</tr>
<tr>
<td><IMG height=4 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
</tr>
<tr>
<td id="menu2" onmouseover="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -150px; WIDTH: 150px"><A href="Superb.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_11.gif" width=77></a><A href="Griprite.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_13.gif" width=46></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_06.gif" width=138></td>
</tr>
<tr>
<td><IMG height=4 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
</tr>
<tr>
<td id="menu3" onmouseover="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -110px; WIDTH: 110px"><A href="Neon.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_19.gif" width=33></a><A href="Metallic.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_21.gif" width=46></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_08.gif" width=138></td>
</tr>
<tr>
<td><IMG height=4 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
</tr>
<tr>
<td id="menu4" onmouseover="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -110px; WIDTH: 110px"><A href="Axiom.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_27.gif" width=40></a><A href="Natural.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_29.gif" width=43></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_10.gif" width=138></td>
</tr>
<tr>
<td><IMG height=4 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
</tr>
<tr>
<td id="menu5" onmouseover="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -55px; WIDTH: 200px"><A href="Raffine.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_35.gif" width=41></a><A href="marco_re.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_42.png" width=116></a></div>
<div></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_12.gif" width=138></td>
</tr>
<tr>
<td><IMG height=4 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
</tr>
<tr>
<td id="menu6" onmouseover="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: 0px; WIDTH: 0px"></div><A href="index.html"><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_14.gif" width=138></a></td>
</tr>
<tr>
<td><IMG height=65 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
</tr>
<tr>
<td id="menu7" onmouseover="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -150px; WIDTH: 200px"><A href="newproducts.htm"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_40.gif" width=57></a><A href="marco_re.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_42.png"></a></div>
<IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_16.gif" width=138></td>
</tr>
<tr>
<td><IMG height=43 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
</tr>
<tr>
<td id="menu8" onmouseover="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -300px; WIDTH: 300px"><A href="Standards.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_48.gif" width=59></a><A href="Packaging.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_50.gif" width=116></a><A href="Test Reports.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_52.gif" width=71></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_18.gif" width=138></td>
</tr>
<tr>
<td><IMG height=36 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
</tr>
<tr>
<td id="menu9" onmouseover="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -60px; WIDTH: 160px"><A href="Making_Pencils.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_451.gif" width=160></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/Normalpages_201.gif" width=160></td>
</tr>
<tr>
<td height="108"></td>
</tr>
</table>
</td>
<td width="14">
</td>
</tr>
<tr>
<td width="15"></td>
<td width="621" height="45"></td>
<td width="14">
<td width="138">
<td width="14"></td>
</tr>
</table>
<script type="text/javascript" src="js/customsignsfooter.js"></script>
</body>
<!-- InstanceEnd --></html>
[/HTML]
-----------------
Everything works fine except the Right side menu. is not displaying.
Thanks