Forum Moderators: open
I am trying to build a menu that switches between images and rollovers.
My menu is represented by a table and each involved <td> tag has an id (id="menu1" to id="menu6"). The trigerring object is another <td> tag (id="menu_selection") that contains only an image. The menu idea is that on a click on the "menu_selection" all of the "menu" tagged <td> tags will change their content.
The javascript I'm using is:
function getObject(id)
{
if (IEDOM)
{
return document.all[id];
}
else
{
if (NS4DOM)
{
return document[id];
}
else
{
if (W3CDOM)
{
return document.getElementById(id);
}
}
}
return false;
}
function changeMenu() {
var obj = getObject("menu_selection");
var obj1 = getObject("menu1");
var obj2 = getObject("menu2");
var obj3 = getObject("menu3");
var obj4 = getObject("menu4");
var obj5 = getObject("menu5");
var obj6 = getObject("menu6");
//debugger;
if (menuOption == 0) {
//change to contact us
if (obj!= false) {
obj.innerHTML = "<img src=\"images/s_go-to-contacts.gif\" width=\"20\" height=\"17\" alt=\"Contact Us\">";
}
if (obj1!= false) {
obj1.InnerHTML = "<a href=\"#\" onmouseover=\"changeImages('s1_write__hat_', 'images/s1_write%2b-hat--over.gif'); return true;\" onmouseout=\"changeImages('s1_write__hat_', 'images/s1_write%2b-hat-.gif'); return true;\" onmousedown=\"changeImages('s1_write__hat_', 'images/s1_write%2b-hat--over.gif'); return true;\" onmouseup=\"changeImages('s1_write__hat_', 'images/s1_write%2b-hat--over.gif'); return true;\"> <img name=\"s1_write__hat_\" src=\"images/s1_write%2b-hat-.gif\" width=\"201\" height=\"39\" border=\"0\" alt=\"\"></a>";
}
if (obj2!= false) {
obj2.InnerHTML = "<a href=\"#\" onmouseover=\"changeImages('s1_maps___hat_', 'images/s1_maps-%2b-hat--over.gif'); return true;\" onmouseout=\"changeImages('s1_maps___hat_', 'images/s1_maps-%2b-hat-.gif'); return true;\" onmousedown=\"changeImages('s1_maps___hat_', 'images/s1_maps-%2b-hat--over.gif'); return true;\" onmouseup=\"changeImages('s1_maps___hat_', 'images/s1_maps-%2b-hat--over.gif'); return true;\"> <img name=\"s1_maps___hat_\" src=\"images/s1_maps-%2b-hat-.gif\" width=\"201\" height=\"35\" border=\"0\" alt=\"\"></a>";
}
if (obj3!= false) {
obj3.InnerHTML = "<img src=\"images/empty1.gif\" width=\"201\" height=\"36\" alt=\"\">";
}
if (obj4!= false) {
obj4.InnerHTML = "<img src=\"images/empty2.gif\" width=\"201\" height=\"35\" alt=\"\">";
}
if (obj5!= false) {
obj5.InnerHTML = "<img src=\"images/empty3.gif\" width=\"201\" height=\"34\" alt=\"\">";
}
if (obj6!= false) {
obj6.firstChild.value = "<img src=\"images/empty4.gif\" width=\"201\" height=\"41\" alt=\"\">";
//InnerHTML = "<img src=\"images/empty4.gif\" width=\"201\" height=\"41\" alt=\"\">";
}
menuOption = 1;
} else {
//change to services
if (obj!= false) {
obj.innerHTML = "<img src=\"images/s1_go-to-services.gif\" width=\"20\" height=\"17\" alt=\"Services\">";
}
if (obj1!= false) {
obj1.InnerHTML = "<a href=\"#\" onmouseover=\"changeImages('s_residential___hat', 'images/s_residential-%2b-hat_.gif'); return true;\" onmouseout=\"changeImages('s_residential___hat', 'images/s_residential-%2b-hat.gif'); return true;\" onmousedown=\"changeImages('s_residential___hat', 'images/s_residential-%2b-hat_.gif'); return true;\" onmouseup=\"changeImages('s_residential___hat', 'images/s_residential-%2b-hat_.gif'); return true;\"> <img name=\"s_residential___hat\" src=\"images/s_residential-%2b-hat.gif\" width=\"201\" height=\"36\" border=\"0\" alt=\"\"></a>";
}
if (obj2!= false) {
obj2.InnerHTML = "<a href=\"#\" onmouseover=\"changeImages('s_business___hat', 'images/s_business-%2b-hat_ove.gif'); return true;\" onmouseout=\"changeImages('s_business___hat', 'images/s_business-%2b-hat.gif'); return true;\" onmousedown=\"changeImages('s_business___hat', 'images/s_business-%2b-hat_ove.gif'); return true;\" onmouseup=\"changeImages('s_business___hat', 'images/s_business-%2b-hat_ove.gif'); return true;\"> <img name=\"s_business___hat\" src=\"images/s_business-%2b-hat.gif\" width=\"201\" height=\"35\" border=\"0\" alt=\"\"></a>";
}
if (obj3!= false) {
obj3.InnerHTML = "<a href=\"#\" onmouseover=\"changeImages('s_divorce___hat', 'images/s_divorce-%2b-hat_over.gif'); return true;\" onmouseout=\"changeImages('s_divorce___hat', 'images/s_divorce-%2b-hat.gif'); return true;\" onmousedown=\"changeImages('s_divorce___hat', 'images/s_divorce-%2b-hat_over.gif'); return true;\" onmouseup=\"changeImages('s_divorce___hat', 'images/s_divorce-%2b-hat_over.gif'); return true;\"> <img name=\"s_divorce___hat\" src=\"images/s_divorce-%2b-hat.gif\" width=\"201\" height=\"36\" border=\"0\" alt=\"\"></a>";
}
if (obj4!= false) {
obj4.InnerHTML = "<a href=\"#\" onmouseover=\"changeImages('s_wills___hat', 'images/s_wills-%2b-hat_over.gif'); return true;\" onmouseout=\"changeImages('s_wills___hat', 'images/s_wills-%2b-hat.gif'); return true;\" onmousedown=\"changeImages('s_wills___hat', 'images/s_wills-%2b-hat_over.gif'); return true;\" onmouseup=\"changeImages('s_wills___hat', 'images/s_wills-%2b-hat_over.gif'); return true;\"> <img name=\"s_wills___hat\" src=\"images/s_wills-%2b-hat.gif\" width=\"201\" height=\"35\" border=\"0\" alt=\"\"></a>";
}
if (obj5!= false) {
obj5.InnerHTML = "<a href=\"#\" onmouseover=\"changeImages('s_accident___hat', 'images/s_accident-%2b-hat_ove.gif'); return true;\" onmouseout=\"changeImages('s_accident___hat', 'images/s_accident-%2b-hat.gif'); return true;\" onmousedown=\"changeImages('s_accident___hat', 'images/s_accident-%2b-hat_ove.gif'); return true;\" onmouseup=\"changeImages('s_accident___hat', 'images/s_accident-%2b-hat_ove.gif'); return true;\"> <img name=\"s_accident___hat\" src=\"images/s_accident-%2b-hat.gif\" width=\"201\" height=\"34\" border=\"0\" alt=\"\"></a>";
}
if (obj6!= false) {
obj6.InnerHTML = "<a href=\"#\" onmouseover=\"changeImages('s_litigation___hat', 'images/s_litigation-%2b-hat_o.gif'); return true;\" onmouseout=\"changeImages('s_litigation___hat', 'images/s_litigation-%2b-hat.gif'); return true;\" onmousedown=\"changeImages('s_litigation___hat', 'images/s_litigation-%2b-hat_o.gif'); return true;\" onmouseup=\"changeImages('s_litigation___hat', 'images/s_litigation-%2b-hat_o.gif'); return true;\"> <img name=\"s_litigation___hat\" src=\"images/s_litigation-%2b-hat.gif\" width=\"201\" height=\"41\" border=\"0\" alt=\"\"></a";
}
menuOption = 0;
}
}
The triggering td tag is:
<td id="menu_selection" onclick="changeMenu();">
THIS DOES NOT WORK! The script changes ONLY the image of the menu_selection <td> BUT NOT of the other ones. IT gives no error, it simply does not work in all three browsers: mozilla, ie6 and netscape.
I put some alerts in, and it simlpy ignores the innerHTML settings. Any ideas of what's wrong? Thanks,
Thanks for the hint, and I partially understand it. However, first menu has 6 items and the second only two. So, the last four are just some (simple) images. why is the innerHTML not replacing those? Is there another solution?
The problem is: How to switch in-situ between different alternatives of the rollover items of a menu? Thanks again
Why wouldn't this kind of thing work?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<script type="text/javascript">
// <![CDATA[
function CreateANewButton(in_old){
in_old.disabled=true;
in_old.value="Spent";
var divvie = document.getElementById('next');
divvie.id = '';
var newbutton = document.createElement('input');
newbutton.type = "button";
newbutton.value = "Create New";
newbutton.onclick = new Function ('CreateANewButton(this);');
divvie.appendChild(newbutton);
var newdiv = document.createElement('div');
newdiv.id = "next";
divvie.parentNode.appendChild(newdiv);
}
// ]]>
</script>
<div>
<form id="test" action="#" method="get"><div id="form_container">
<div><input type="button" onclick="CreateANewButton(this)" value="Create New" /></div>
<div id="next"></div>
</div></form>
</div>
</body>
</html>
