Hi All,
When trying to change the bcackgroundImage of element useing javascript method style.backgroundImage="url(blue_link.gif) no errors found but the script can't find the image so what is the correct way to use the address of the image?
Thanks very much in advance,
Fred
You just need to specify correct way. Keep in mind that when you try to specify such url (without any path) the script will try to find the image in current folder.
In other case, if you have <base ... /> tag into your code - browser will try to find the image with specified name under folder specified in <base ... > tag.
There are one more case, if you use RewriteRules feature. If so - write it here, you'll get additional comments.
Assuming you would like to change the backgroud of:
<p id="para1">Text</p>
You would do so as follows:
document.getElementById('para1').style.backgroundImage='http://www.site.com/Images/yourImage.gif';
Thanks for the reply. What I'm trying to appomlish is a horizantal menu with horizantal sub as well like this:
MainMenu
Sub sub subsub
and here is the Java code I'm using:
var image2=new Image()
image2.src="root/blue_ch.gif"
function show_select()
{
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
//id_ul.style.backgroundColor='#0f498d';
}
function hide_submenu()
{
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0f498d';
//var id_ul=document.getElementById("mainurl");
//id_ul.style.backgroundImage="url(blue_link.gif)";
//='url(./blue_ch.gif)';
//var id_ul=document.getElementById("mainurl");
//id_ul.style.backgroundImage="url(blue_link.gif)";
}
function show_sub_menu1()
{
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("mainurl");
id_ul.style.backgroundImage="url(blue_ch.gif)";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menuma()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menupr()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menucal()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menusho()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menucam1()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menucam2()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';
}and this is not working proplerly for some reason...
Thanks in advance.
Fred
The simplest way to solve your problem is to create "generic" CSS classes and define the desired properties to the classes instead. That way you do not need to do modify the element via:
elementRef.style.property='value';
Instead you would just say
elementRef.className='className';
Perhaps this will make things more clear:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css"><!--
.show{visibility:visible;display:'';background-color:#ffff00;background-image:url('/Images/background.gif');}
.hide{visibility:hidden;display:none}--></style>
<script type="text/javascript"><!--
function activate(elemId)
{
var elem = document.getElementById(elemId);
if(elem)
{
elem.className = String(elem.className).replace(/\bhide\b/g,"");
elem.className = String(elem.className).replace(/ +/g," ");
elem.className += " show";
}
else
{
alert( "Error at activate("+elemId + "): element does not exist.");
}
}
function deactivate(elemId)
{
var elem = document.getElementById(elemId);
if(elem)
{
elem.className = String(elem.className).replace(/\bshow\b/g,"");
elem.className = String(elem.className).replace(/ +/g," ");
elem.className += " hide";
}
else
{
alert( "Error at deactivate("+elemId + "): element does not exist.");
}
}//--></script>
</head>
<body>
<ul id="menu">
<li>a</li>
<li onmouseover="activate('submenu')" onmouseout="deactivate('submenu')">b
<ul id="submenu" class="hide">
<li>b1</li>
<li>b2</li>
</ul>
</li>
<li>c</li>
</ul>
</body>
</html>
The problem you are encountering are because on every function you have:
var id_ul=document.getElementById("sub_menu_bg");
but on your HTML code you do not have any element with that id. To clarify, something similar to this should exist somewhere:
<ul id="sub_menu_bg">...</ul>
It does not have to be a <ul> element. See if the code below works for you.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript"><!--
var image2=new Image()
image2.src="root/blue_ch.gif"
function show_select()
{
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="visible";
id_ul.style.display="";
id_ul.style.backgroundColor='#0f498d';
// var id_ul=document.getElementById("sub_menu_bg");
//id_ul.style.backgroundColor='#0f498d';
}
function hide_submenu()
{
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
// var id_ul=document.getElementById("sub_menu_bg");
// id_ul.style.backgroundColor='#0f498d';
//var id_ul=document.getElementById("mainurl");
//id_ul.style.backgroundImage="url(blue_link.gif)";
//='url(./blue_ch.gif)';
//var id_ul=document.getElementById("mainurl");
//id_ul.style.backgroundImage="url(blue_link.gif)";
}
function show_sub_menu1()
{
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="visible";
id_ul.style.display="";
var id_ul=document.getElementById("mainurl");
id_ul.style.backgroundImage="url(blue_ch.gif)";
// var id_ul=document.getElementById("sub_menu_bg");
// id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menuma()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="visible";
id_ul.style.display="";
// var id_ul=document.getElementById("sub_menu_bg");
// id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menupr()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="visible";
id_ul.style.display="";
// var id_ul=document.getElementById("sub_menu_bg");
// id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menucal()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="visible";
// var id_ul=document.getElementById("sub_menu_bg");
// id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menusho()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="visible";
id_ul.style.display="";
// var id_ul=document.getElementById("sub_menu_bg");
// id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menucam1()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="visible";
id_ul.style.display="";
// var id_ul=document.getElementById("sub_menu_bg");
// id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menucam2()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
id_ul.style.display="none";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="visible";
id_ul.style.display="";
// var id_ul=document.getElementById("sub_menu_bg");
// id_ul.style.backgroundColor='#0199DC';
}
//--></script>
<ul align="center">
<li onmouseover="show_sub_menu1();" onmouseout="hide_submenu();">
<a id="mainurl" href="http://something.com/" target="_blank">Home</a>
<ul id="sub_main_men" onmouseover="show_sub_menu1();" onmouseout="hide_submenu();">
<li><a href="http://something.com/">home</a></li>
<li><a href="http://something.com/">home</a></li>
<li><a href="http://something.com/">home</a></li>
<li><a href="http://something.com/">home</a></li>
<li><a href="http://something.com/">home</a></li>
<li><a href="http://something.com/">home</a></li>
</ul>
</li>
<li onmouseover="show_select();" onmouseout="hide_submenu();">
<a href="http://something.com/" target="_blank">Select Activity</a>
<ul id="sub_men" onmouseout="hide_submenu();" onmouseover="show_select();">
<li><a href="http://something.com/">Tennis</a></li>
<li><a href="http://something.com/">Cricket</a></li>
<li><a href="http://something.com/">Hiking</a></li>
<li><a href="http://something.com/">Softball</a></li>
<li><a href="http://cycling.eyoplay.com/">Cycling</a></li>
<li><a href="http://something.com/">Bowling</a></li>
<li><a href="http://something.com/">Pool</a></li>
<li><a href="http://www.eyoplay.com/" class="hover">Home</a></li>
<li><a href="http://something.com/">Soccer</a></li>
<li><a href="http://something.com/">Baseball</a></li>
<li><a href="http://something.com/">Basketball</a></li>
<li><a href="http://something.com/">Golf</a></li>
<li><a href="http://something.com/">Volleyball</a></li>
<li><a href="http://something.com/">Hockey</a></li>
<li><a href="http://something.com/">Football</a></li>
</ul>
</li>
<li onmouseover="show_sub_menuma();" onmouseout="hide_submenu();" ><a href='http://www.something.com/index.php?page=mailbox§ion=inbox'>Mailbox</a>
<ul id="sub_main_menma" onmouseout="hide_submenu();" onmouseover="show_sub_menuma();" >
<li><a href="http://something.com/">Mailbox</a></li>
<li><a href="http://something.com/">Mailbox</a></li>
<li><a href="http://something.com/">Mailbox</a></li>
<li><a href="http://something.com/">Mailbox</a></li>
<li><a href="http://something.com/">Mailbox</a></li>
<li><a href="http://something.com/">Bowling</a></li>
</ul>
</li>
<li onmouseover="show_sub_menupr();" onmouseout="hide_submenu();" ><a href="http://www.something.com/profiles/">My Profile</a>
<ul id="sub_main_menpr" onmouseout="hide_submenu();" onmouseover="show_sub_menupr();">
<li><a href="http://tennis.eyoplay.com/">Profile</a></li>
<li><a href="http://something.com/">Profile</a></li>
<li><a href="http://something.com/">Profile</a></li>
<li><a href="http://something.com/">Profile</a></li>
<li><a href="http://something.com/">Profile</a></li>
<li><a href="http://something.com/">Profile</a></li>
</ul>
</li>
<li onmouseover="show_sub_menucal();" onmouseout="hide_submenu();" ><a href="http://www.something.com/index.php?page=calendar">My Calendar</a>
<ul id="sub_main_mencal" onmouseout="hide_submenu();" onmouseover="show_sub_menucal();">
<li><a href="http://something.com/">Calendar</a></li>
<li><a href="http://something.com/">Calendar</a></li>
<li><a href="http://something.com/">Calendar</a></li>
<li><a href="http://something.com/">Calendar</a></li>
<li><a href="http://something.com/">Calendar</a></li>
<li><a href="http://something.com/">Calendar</a></li>
</ul>
</li>
<li onmouseover="show_sub_menusho();" onmouseout="hide_submenu();"><a href="http://shop.com/" target="_blank">Shopping</a>
<ul id="sub_main_mensho" onmouseout="hide_submenu();" onmouseover="show_sub_menusho();">
<li><a href="http://tennis.com/">Shopping</a></li>
<li><a href="http://cricket.com/">Shopping</a></li>
<li><a href="http://hiking.com/">Shopping</a></li>
<li><a href="http://softball.com/">Shopping</a></li>
<li><a href="http://cycling.com/">Shopping</a></li>
<li><a href="http://bowling.com/">Shopping</a></li>
</ul>
</li>
<li onmouseover="show_sub_menucam1();" onmouseout="hide_submenu();"><a href="http://fields.com/" target="_blank">Camps</a>
<ul id="sub_main_mencam1" onmouseover="show_sub_menucam1();" onmouseout="hide_submenu();">
<li><a href="http://tennis.com/">Camps</a></li>
<li><a href="http://cricket.com/">Camps</a></li>
<li><a href="http://hiking.com/">Camps</a></li>
<li><a href="http://softball.com/">Camps</a></li>
<li><a href="http://cycling.com/">Camps</a></li>
<li><a href="http://bowling.com/">Camps</a></li>
</ul>
</li>
<li onmouseover="show_sub_menucam2();" onmouseout="hide_submenu();"><a href="http://fields.com/" target="_blank">Camps</a>
<ul id="sub_main_mencam2" onmouseover="show_sub_menucam2();" onmouseout="hide_submenu();">
<li><a href="http://tennis.com/">Camp</a></li>
<li><a href="http://cricket.com/">Camp</a></li>
<li><a href="http://hiking.com/">Camp</a></li>
<li><a href="http://softball.com/">Camp</a></li>
<li><a href="http://cycling.com/">Camp</a></li>
<li><a href="http://bowling.com/">Camp</a></li>
</ul>
</li>
</ul>
</body>
</html>Hi Hielo,
Thanks very much for tips, but I am dumb-founded.
I pasted above code...and now I've got blank screen.
I don't know what I'm missing now....
oh I know...knowledge :)
I don't know what you mean by "...I pasted...". The code I supplied was a complete file by itself. Basically you were supposed to save it as a file by itself and see if it does what you want. If so, you to analyze what I did and extract what you need from it (be it code or idea) and apply it to your own page.
I cannot tell why your page is not working because I don't know what your HTML code looks like. CSS only makes sense if you have the HTML structure to look at. That's why I gave you a complete page. You can save what I gave you as hielo.html and and use that as a starting point for a new version of your file. Just add the content incrementally and keep testing the page as you add CSS and/or Javascript to it to make sure that whay you recently added does not break it.
Lastly, the only thing I can think of for which your page is "blank" is because on every one of your javascript functions I saw references to "sub_menu_bg" as in the following:
//var id_ul=document.getElementById("sub_menu_bg");
//id_ul.style.backgroundColor='#0199DC';
but if you notice carefully, I commented them all out. The reason for this is that I could not find any html element with id="sub_menu_bg". Hence, that line was giving errors all over the place. If your file has that id defined somewhere, you need to make the necessary adjustments to activate that element. This "activation" would simply be uncommenting the two relevant commented lines on every function. It's possible that it is hidden by default and hence the reason why your page is blank.
An id can be used on only one element in a web page. The second occurrence of the same id causes an error.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.