I am using Dreamweaver MX to create a website for a client that wants to display their inventory of machinery. I've created a table on my main page that consists of all my images that make up the website. There is a menu (created from images) going along the top and side. Hovering your mouse over each button causes a javascript pop-up menu to appear underneath which gives individual part numbers.
My first inclination was to use a frameset for the site so that I could keep the top and side menu as their own pieces and then leave the middle as another frame that would change depending on what the user selected... but I discovered that my pop-up windows were being cut off with the presence of that center frame. After looking online, I discovered that if I used an iframe instead for the middle area, the pop-up menus will overlap the iframe.
Now, here's my problem: How do I tell the pop-up menu to change what I want in my embedded iframe? I know how to link pop-up menus to new pages, but never a specific element within the same page. I have searched online and tried to use the TARGET method but I don't know if I'm doing things right. I have named my iframe "FRAME1" so theoretically the Target should work. I might not be doing it right because of the javascript.
I am not an advanced web designer and most of my experience has been with simple HTML coding, tables, and the preset javascript behaviors (such as pop-up menus and such) in Dreamweaver. I realize that CSS would probably be a better way to do this whole site, but its something I really haven't learned yet. Thank you for any help you can give. Here is my code as it stands now.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<script language="JavaScript">
<!--
function mmLoadMenus() {
if (window.mm_menu_0429120848_0) return;
window.mm_menu_0429120848_0 = new Menu("root",76,16,"Arial, Helvetica, sans-serif",10,"#FFFFFF","#FFFFFF","#FF3333","#993333","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_0429120848_0.addMenuItem("ITEM_1","location='data2.htm'");
mm_menu_0429120848_0.addMenuItem("ITEM_2","location='data3.htm'");
mm_menu_0429120848_0.hideOnMouseOut=true;
mm_menu_0429120848_0.bgColor='#666666';
mm_menu_0429120848_0.menuBorder=1;
mm_menu_0429120848_0.menuLiteBgColor='#999999';
mm_menu_0429120848_0.menuBorderBgColor='#FFFFFF';
mm_menu_0429120848_0.writeMenus();
} // mmLoadMenus()
//-->
</script>
<script language="JavaScript" src="mm_menu.js"></script>
<body>
<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="1032" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9"><img src="Images/UBE_banner.gif" width="1056" height="143"></td>
</tr>
<tr>
<td width="228"><img src="Images/leftmenu_1.gif" width="228" height="20"></td>
<td width="86"><a href="java script:;" onMouseOver="MM_showMenu(window.mm_menu_0429120848_0,83,17,null,'image2')" onMouseOut="MM_startTimeout();"><img src="Images/combos_button.gif" name="image2" width="86" height="20" border="0" id="image2"></a></td>
<td width="88"><img src="Images/slicers_button.gif" name="image3" width="88" height="20" id="image3"></td>
<td width="88"><img src="Images/baggers_button.gif" name="image4" width="88" height="20" id="image4"></td>
<td width="88"><img src="Images/wrappers_button.gif" name="image5" width="88" height="20" id="image5"></td>
<td width="89"><img src="Images/dicers_button.gif" name="image6" width="89" height="20" id="image6"></td>
<td width="87"><img src="Images/trayloaders_button.gif" width="87" height="20"></td>
<td width="87"><img src="Images/specialty_button.gif" width="87" height="20"></td>
<td width="191"><img src="Images/rightmenu_1.gif" width="215" height="20"></td>
</tr>
</table>
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="Images/leftmenu_2.gif" width="228" height="47"></td>
<td rowspan="10" valign="top"><iframe name="FRAME1" src="data.htm" width="613" height="629" frameborder="0"></iframe> </td>
<td><img src="Images/Whats_new.gif" width="192" height="47"></td>
<td><img src="Images/rightmenu_2.gif" width="23" height="47"></td>
</tr>
<tr>
<td height="16"><img src="Images/leftmenu_3.gif" width="228" height="16"></td>
<td rowspan="6"><img src="Images/current_news.gif" width="192" height="116"></td>
<td rowspan="6"><img src="Images/rightmenu_3.gif" width="23" height="116"></td>
</tr>
<tr>
<td><img src="Images/home_button.gif" width="228" height="18"></td>
</tr>
<tr>
<td><img src="Images/equipment_button.gif" name="image1" width="228" height="21" id="image1"></td>
</tr>
<tr>
<td><img src="Images/bakeryproducts_button.gif" width="228" height="20"></td>
</tr>
<tr>
<td><img src="Images/information_button.gif" width="228" height="20"></td>
</tr>
<tr>
<td><img src="Images/sparepartorder_button.gif" width="228" height="21"></td>
</tr>
<tr>
<td><img src="Images/contact_button.gif" width="228" height="20"></td>
<td rowspan="3"><img src="Images/rightmenu_text.gif" width="192" height="466"></td>
<td rowspan="3"><img src="Images/rightmenu_4.gif" width="23" height="466"></td>
</tr>
<tr>
<td><img src="Images/memberlogin_button.gif" width="228" height="20"></td>
</tr>
<tr>
<td height="18"><img src="Images/leftmenu_4.gif" width="228" height="426"></td>
</tr>
</table>
</body>
</html>
1 May, 2008 - 03:38 PM
| 